Zakulacené rohy pomocí border-radius
Border-radius je nová funkce, kterou přináší CSS3, díky níž můžeme jednoduše vytvořit zakulacené okraje u rámečků. Konečně tak můžeme upustit od zastaralých a neefektivních jiných řešení. Tím myslím formou obrázku, ať už normálně 4mi obrázky, nebo pomocí CSS Sprite v obrázku jednom. Další možností bylo využití javaScriptu. Nyní toto vše ale už není potřeba. Vystačíme si s pár řádky v CSS.
Podpora prohlížečů
– border-radius je momentálně asi jedena z nejlépe podporovaných vlastností z CSS3, i když… Microsoft s IE, co si budeme povídat, opět trochu zaspal dobu
Prohlížeč | Podpora od verze |
---|---|
IE | 9+ |
Firefox | 4+ |
Chrome | Od nepaměti |
Safari | 5+ |
Opera | Od nepaměti |
Jak vidíme na obrázku, u border-radius
můžeme nastavit poloměr zakulacení u všech 4 rohů podle libosti, dokonce se dá měnit i barva nebo styl rámečku stejně jako u starého, známého border
Jak na to:
Dejme tomu, že máte nějaký div
se třídou rounded-corners a
chcete, aby měl zakulacené rohy.
HTML
<div class="rounded-corners">Text...</div>
CSS část pak tedy může vypadat nějak takto:
.rounded-corners {
border-radius: 10px 30px 20px 60px; //levá_horní pravá_horní pravá_dolní levá_dolní
border: 2px solid #a1a1a1; //zadáváte pokud chcete barvu a šířku rámečku
}
VYZKOUŠEJTE TAKÉ NÁŠ GENERÁTOR ZAKULACENÝCH ROHŮ!
najdete jej na adrese: http://border-radius.pcdays.cz/