Fear-Art | Agencja interaktywna, strony internetowe, sklepy internetowe.

Jak zaokrąglić brzegi obiektu przy pomocy HTML'a, nie używając grafik, by działały pod wszystkimi przeglądarkami.

Otóż jest to możliwe tylko dla przeglądarek Safari, Firefox, Chrom i Opera.
Jak na nieszczęście IE nadal nie obsługuje tego parametru. Mam nadzieje, że zmieni się to wraz z IE9.

Aktualnie wszystkie ostatnie wersje w/w przeglądarek obsługują tag:

.box {
        border-radius:10px;
        }

Gdzie 10px to kont zaokrąglenia.

Zaokrąglenie możemy oczywiście zastosować również tylko do konkretnego rogu:

.box {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
}

 

Zniekształcenie zaokrąglenia możemy osiągnąć podając dwie różne wartości:

.box {
        border-top-right-radius: 10px 6px;
        }