Wielu webdeveloperów w oczekiwaniu na CSS 3.0 staje często przed problemem zaokrąglonych rogów w blokach. Jak się okazuje dostępne są już metody pozwalające na zrezygnowanie z systemu 4 obrazków. Co prawda zaprezentowane poniżej rozwiązanie działa jedynie pod przeglądarkami FireFox, Chrome, Safari, Konqueror i pochodnymi, jednak pozwala na pewną redukcję ilości grafiki na stronie, a co za tym idzie także uproszczenie edycji.
#box { border: 1px solid #000000; /*Definiujemy obramowanie elmentu*/ -moz-border-radius: 3px; /*FireFox*/ -khtml-border-radius: 3px; /*Konqueror*/ -webkit-border-radius: 3px; /*Chrome i Safari*/ border-radius: 3px; /*CSS 3.0*/ }
Wymienione parametry (od drugiego począwszy) pozwalają nam na nadanie promienia kolejnym rogom. W przypadku moz-border-radius możemy zdefiniować także wartość dla każdego z osobna (od górnego, lewego począwszy).
Jaki efekt uzyskamy w Internet Explorerze i Operze? Będzie to standardowy box z kanciastymi krawędziami. Tak obrobione elementy można obejrzeć w poprzednich postach.
