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.
| 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 takhle dají udělat kulaté rohy bez problémů. 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 taky už všude v pohodě.
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ů.
Vnitřní zakulacení
Dokud je border-radius menší než tloušťka rámečku (tedy border-width), zakulacuje se pouze vnější okraj rámečku. V obsahu zůstává ostrý roh. Teprve když border-radius přesáhne border-width, začne se zakulacovat i vnitřní okraj rámečku a ostrý roh zmizí. Obsah ale zůstává na původním místě a je možné, že obsah (třeba text) bude oblouk rámečku překrývat.
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.
Nahrazení stínem
Zvažte, jestli situaci neřeší lépe stíny rámečků přes box-shadow, které jsou samy přirozeně zakulacené. Krom toho box-shadow respektuje i border-radius, takže se dají dělat i stíny kulatých rohů. To je docela důležité pro někoho, kdo rád používá outline, ale nedokáže outline zakulatit, protože outline nejde zakulatit.
Podpora
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 |
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
Vlastnosti relativní ke směru textu
Protože různé jazyky píšou různým směrem, teoreticky vyvstává potřeba mít vlastnosti, které jednou určují pravý horní roh a jindy levý horní roh. Proto vznikly další vlastnosti border-start-start-radius, border-start-end-radius, border-end-start-radius a border-end-end-radius. Pomalu získávají podporu v prohlížečích.
Příklady
Příklad na border-radius.
Reklama
