Kulaté okraje v CSS

Pro prohlížeče Internet Explorer 9 a novější je možné použít přímo CSS vlastnost border-radius, což je zkrácený zápis vlastností:

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-left-radius a
• border-bottom-right-radius.

Jako hodnotu jde použít libovolnou délkovou jednotku.

Pomocí vlastnosti border-radius se dá docílit i úplně kulatého vzhledu elementu (nebo i kruhového obrázku), řešením je nastavit border-radius o polovinu nižší než jsou rozměry elementu. Nebo universálně:

element {border-radius: 50%}

Lze zakulatit i element bez okraje (borderu).

(Kulaté rohy se hodí i při kreslení pomocí CSS.)

Nepravidelné rámečky

Zajímavá a ne moc známá věc, je zápis s lomítkem:

element {border-radius: 25% / 75%}

Tím jde určovat zvlášť horisontální (před lomítkem) a zvlášť vertikální (za lomítkem) radius. Chování bez lomítka je nastavuje shodné.

Složitějšími kombinacemi lze docílit hodně nestandardních výsledků.

Existuje hezký generátor:

Vnější rámeček – outline

Od Exploreru 8 je možné používat i vnější rámeček, tzv. outline, jak je to u něj s oblými rohy?

Zatím něco jako outline-radius rozumnou podporu napříč prohlížeči nemá. Výjimkou je Firefox s nestandardní vlastností -moz-outline-radius

Pořád ale existují následující možnosti:

Obalový element

Použít více elementů s border-radius.

<div class=kulaty-obal>
  <div class=kulaty>
  </div>
</div>

Stín jako rámeček

Další možnost je CSS vlastnost box-shadow, tedy stín boxu (funguje podobně jako border-radius od Internet Exploreru 9). Stín bude vně elementu s border-radius.

element {border-radius: 50%; border: 5px solid black; box-shadow: 0px 0px 0px 5px green}

Pomocí box-shadow můžeme vytvořit i více rámečků najednou, jak ve své ukázce předvedl pan Bubák.

Pseudo-elementy obsahu

Pomocí pseudo-elementů obsahu jde vytvořit další elementy ke stylování. Rámeček vytvořený přes :after bude uvnitř elementu.

Historické prohlížeče

V roce 2018 už to nejspíš nemá smysl řešit, ale při podporování starších prohlížečů (IE 8 a starší) jsou k úvaze tyto možnosti:

1. kulaté rohy oželet (je třeba si rozmyslet, zda se to vyplatí),
2. použít obrázky,
3. rámeček doslova nakreslit.

K třetímu způsobu existují hotová řešení.

jQuery Corner Demo

Řešení v jQuery, rámečky jsou kresleny pixel po pixelu.

border-radius.htc

Jedná se o *.htc soubor, který kreslí kulaté rámečky v Explorerech přes behavior a VML.