CSS vlastnost border-radius určuje poloměr zakulacení rohů prvků. Nejčastěji to je vidět při použití rámečů border, ale kulaté rohy se dají udělat i bez přímého použití vlastnosti border. Prohlížeč kulaté rohy vykreslí tak, že vlastně z prvku ustřihne růžek a co je v růžku, logicky nahradí pozadím nadřazeného prvku.
hodnoty | poloměr zakulacení rohů |
---|---|
délka v pixelech | bude to kulaté s takovým poloměrem, jak jsou zadané pixely |
procenta | zakulacení se provede tak, aby ukousnutí postihlo zadaná procenta výšky nebo šířky prvku. Lze tak tvořit "vajíčkovité" okraje přizpůsobující vykousnutí rozměru prvku. |
4 hodnoty | pokud se zadají 4 hodnoty, platí postupně pro rohy top-left, top-right, bottom-right a bottom-left, takže v podstatě ve směru hodinových ručiček. Pokud nějaká hodnota od konce chybí, přebírá kulatost diagonálně protějšího rohu. |
hodnota / hodnota | 1. hodnota se týká horizontálního dosahu ukousnutí rohu. 2. hodnota určuje, kam až dosáhne ukousnutí rohu vertikálně. Lze tak tvořit mírně skosené rohy. |
Prvku se dají udělat kulaté rohy. Dříve (před rokem 2012) byl tento efekt omezen na použití v prohlížeči typu Mozilla s proprietální vlastností -moz-border-radius, nyní už border-radius naštěstí podporují všechny hlavní prohlížeče. Internet Explorer podporuje border-radius od verze 9, takže je ještě potřeba používat border-radius s rozmyslem, protože kdo má stále Internet Explorer 8, tak rohy uvidí normálně hranaté.
Při svých experimentech s border-radius jsem si všimnul zvláštního chování. Prohlížeč ustřihne správně růžek prvku, kterému je zadaná border-radius. Pokud se ale nějaký vnořený prvek chce vykreslit v oblasti ustřiženého růžku, prohlížeč mu to normálně povolí. To může vést k tomu, že vnořené prvky mohou z kulatých rohů vyčuhovat. Chcete-li tomuto divně vypadajícímu efektu předejít, zadávejte border-radius vždy s dostatečně velkým vnitřním okrajem (vlastnost padding) nebo zadávejte overflow: hidden (příliš netestováno). Nelze účinně ustřihnout růžky u prvku <iframe>, protože jeho obsah kulaté rohy nerespektuje, a možná i u dalších zvláštních objektů.
Nenáviděl jsem to. Když někdo trval na tom, že objekty musejí mít kulaté rohy, muselo se to dříve řešit v horším případě tabulkou, v lepším případě matrjoškou. Tabulka měla devět buněk, v prostřední byl obsah a v rozích obrázky (ty se napřed musely nakreslit), pokaždé s jiným zakulacením rohu. Brrr. Naštěstí je tahle příšerná doba za námi. Dnes se tato řešení musejí používat, pokud si nějaký rozumbrada vymyslí rohy různě zkosené nebo třeba se smajlíkem. Ale i to jde relativně efektně vyřešit pomocí multiple background.
Podpora je celkem dobrá přibližně od roku 2012.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
Internet Explorer | od verze 9 | IE 7 a IE 8 border-radius nezná a rohy vykreslí normálně hranaté |
Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | umí i border-radius od verze FF 4 |
Opera | ano, od verze 10 | |
Chrome | ano | starší varianty uměly webkit-border-radius |
Následující vlastnosti umějí zakulatit konkrétní roh:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Příklad na border-radius.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.