CSS vlastnost border-radius umožňuje nastavit prvku kulaté okraje. To, zda používat kulaté rohy u tlačítek, se mění stejně jako barva modního dámského oblečení, ale border-radius se dá použít i na mnohem více věcí.

Inspirováno: https://9elements.com/io/css-border-radius/.

Matematická vstuvka

Na úvod si dovolím malou matematickou předehru týkající se velikosti klikatelné plochy na dotykových přístrojích:

Pokud máte čtvercovou klikací ikonu (nebo checkbox) o rozměrech (např.) 16×16 pixelů, její klikatelná plocha je 256 pixelů (S = a²). Pokud tuto ikonu změníte na kulatou, její klikatelná plocha se zmenší o zhruba 22% na 200px (S = π r²), což sníží použitelnost při ovládání prstem. Abyste zachovali stejně velikou plochu, měli byste rozměr plochy zvětšit alespoň o 12%. Ikona se tak z 16px zvětší na 18px a její plochat bude 254px (což je hruba stejně jako u čtvercové).

V závislosti na tom, jaké níže uvedené zaoblení použijete pro klikatelné prvky, byste měli zvážit rozměry prvku, abyste neklesli pod použitelné minimum.

Kulaté rohy

Základní definice kulatých okrajů tlačítek, inputů a dalších prvků je jednoduchá:

input, button {
    border-radius: 5px;
}

Tímto uděláte kulaté rohy, které mají šířku i výšku 5 pixelů.

Oválné rohy

Také ale můžete použít procenta, která se pak budou vztahovat k šířce a výšce daného prvku:

input, button {
    border-radius: 5%;
}

Pokud budete mít tlačítko velké 40×200px, budou mít kulaté okraje 10px na šířku, ale jen 2 pixely na výšku a půjde tedy spíše o oválné okraje. Toho můžete využít, pokud se nemůžete rozhodnou, zda mít kulaté nebo hranaté okraje tlačítek a vytvořit tak unikátní vzhled stránek.

Kulaté obrázky

Vlastnost border-radius primárně nastavuje zaoblení okraje – tedy té čáry nakreslené kolem prvku. Současně ale určuje, které části prvku se zobrazí, protože vše, co je mimo okraj (ať už zaoblený nebo hranatý) se nezobrazí (za určitých podmínek jako overflow: hidden).

Pokud tedy border-radius použijete na obrázek nebo prvek, který má obrázek na pozadí, můžete ho oříznout do kulata bez potřeby měnit samotný obrázek:

img.round, picture.round {
    border-radius: 50%;
}

Pokud chcete zcela kulatý prvek, musí vždy dvě protilehlé strany (levá a pravá, horní a dolní) dát dohromady 100%. Jelikož definujete všechny okraje společně, dosáhnete toho nastavením 50% (tedy 50% + 50%).

Šišaté prvky

Stejně jako u dalších CSS vlastností je i zápis s jedním číslem pouze zkrácená verze mnohem delšího zápisu. Pokud nechcete mít všechny rohy stejně kulaté, můžete zadat 4 hodnoty, kterými určíte poloměr rohů v pořadí levý horní, pravý horní, pravý dolní a levý dolní (tedy podobně jako u border-width):

input.funky, button.funky {
    border-radius: 5px 0px 5px 0px;
}

Tlačítka a inputy s tímto stylem budou mít kulaté dva úhlopříčně protilehlé rohy (pravý horní a levý dolní), zatímco druhé dva budou hranaté.

Funky

Naopak pokud chcete vytvořit vzhled záložek, které jsou nahoře kulaté a dole hranaté, použijte:

div.tab {
    border-radius: 5px 5px 0 0;
}

Tab 1Tab 2Tab 3

Samozřejmě i zde můžete použít procenta, pomocí kterých můžete udělat obrázky zajímavě tvarované:

img.funky {
    border-radius: 50% 0 50% 0;
}
img.tomb-stone {
    border-radius: 50% 50% 0 0;

Patvary

Samozřejmě se nemusíte držet 50% a můžete použít i jiné hodnoty. Dokonce se nemusíte omezovat jen do součtu 100%, ale můžete použít i větší hodnoty (200%, 500%, apod.). V takovém případě prohlížeč nakreslí kruh, který bude větší než samotný prvek a umístí ho tak, aby se dotýkal okraje prvku (tečny). Pak nebude roh kulatý na celý čtvrt-kruh, ale jen jeho část:

img.weird {
    border-radius: 500% 300% 0 300%;
}

Pokud chcete například zobrazit fotky v mapě (avatary lidí, fotky míst, apod.), tohle může být zajímavý způsob jak udělat z fotky šipku.

Beztvaré prvky

Zápis se 4 hodnotami stále není kompletní verze vlastnosti border-radius. Celý zápis totiž vypadá takhle:

img {
    border-radius:
          50% 25% 50% 75% / 75% 50% 25% 50%;
}

V tomto zápis se vždy čtveřice čísel vztahuje k rohům (levý horní, pravý horní, pravý dolní a levý dolní), přičemž první čtveřice před lomítkem určuje poloměr oválů na výšku, zatímco druhá čtveřice za lomítkem určuje poloměr na šířku.

Řečeno jinak, v příkladu výše první číslo 50% určuje, že horní okraj levého horního rohu bude končit v polovině prvku, zatímco hodnota 75% za lomítkem říká, že levý konec téhož rohu bude ve 3/4 jeho výšky.

Pokud se vám na uvedeném obrázku zdá, že horní konec levého horního rohu končí dříve než v polovině šířky prvku, je to tím, že vzhled rohu ovlivnili rozměry ostatních rohů (nejvíce asi 75% u pravého dolního rohu a 50% u levého dolního rohu), protože prohlížeč používá (v případě, že součet velikostí sousedních rohů přesahuje 100%) složité matematické výpočty pro vytvoření plynulých zakulacených přechodů. Tudíž v důsledku toho, aby zakulacení na levé a dolní straně prvku bylo plynulé a nevznikal tam špičatý roh (uprostřed strany), bylo nutné horní okraj posunout více doleva.

Pokud použijeme stejný rozměr levého horního rohu (50%/75%), ale všechny ostatní uděláme hranaté (0/0), je již viditelné, že horní konec je v polovině (nad hlavou postavy).

V praxi toho můžete využít pro vytvoření zajímavých (třeba náhodných) vzhledů fotek místo nudných čtverců a obdélníků.

Nebo můžete oříznout jen jeden roh jen trochu a vytvořit umírněný, ale stále zajímavý vzhled:

 img {
    border-radius:
        25% 0 0 0 / 100% 0 0 0;
}

Generátor

Pro vytvoření definice okrajů můžete použít nástroj Fancy Border Radius Generator.

Pro přepínání režimů si všimněte odkazu pod nadpisem Full control (řízení všech 8 hodnot) a Simple Version (zjednodušená verze, kde sousední rozměry dávají vždy 100%).

Nevýhoda tohoto nástroje je, že neumožňuje otestovat situaci, kdy jedna hodnota nebo součet přesahuje 100%. K tomu ale stačí použít Developer konzoly v prohlížeči na libovolný obrázek nebo prvek na libovolné stránce.