Kulaté okraje v CSS
Jak vytvořit v CSS zaoblené okraje.
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
aborder-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 (border
u).
(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:
- kulaté rohy oželet (je třeba si rozmyslet, zda se to vyplatí),
- použít obrázky,
- 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řesbehavior
a VML.
Komentáře