O webu
Kulaté rohy

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 je možné 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.)

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á. Proto v případě, kdy potřebujeme více kulatých orámování, 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 je možné vytvořit další elementy ke stylování. Rámeček vytvořený přes :after bude uvnitř elementu.

Starší prohlížeče

Pro starší prohlížeče (IE 8 a starší) jsou možnosti následující:

  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.