Border-radius

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.

border-radius
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ů.

Starší řešení kulatých rohů

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

Podpora je celkem dobrá přibližně od roku 2012.

Podpora vlastnosti border-radius
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  

Odvozené vlastnosti

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

Toto je i pořadí, ve kterém se interpretují hodnoty u border-radius, pokud obsahuje více hodnot. Hodnota, která tak zadána není, typicky přebírá vlastnosti protilehlého rohu.

Příklad:

border-radius: 25px 50px 0px;

je ekvivalentní k

border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 50px

Příklady

Příklad na border-radius.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.