Border-radius: CSS ile yuvarlatılmış köşeler

CSS 3.0 ile birlikte W3C border stillerine yeni özellikler ekledi. CSS 2.1 versiyonunda mozilla için kullanılan -moz-border-radius stili için artık daha güçlü bir biçimde karşımızda. Mozilla ve Safari, CSS 3 ile daha etkin kullanılabilecek border-radius stilini destekleyen tarayıcılar. Firefox ile aynı çekirdeği kullanan Google Chrome ‘u da destekleyenler arasına katabiliriz. İnternet teknolojileirni herzaman geriden takip eden Microsoft’un tarayıcısı Explorer’ dan henüz böyle bir yenilik beklemek için erken. Malesef explorer da desteklemeyen tarayıcılar arasında…

div {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
}

Köşelere Özel Biçimlendirme

Herbir köşe için ayrı stil biçimlendirmesi yaparak da yalnızca tek köşesi, 2 veya üç köşesi yuvarlatılmış dikdörtgenler oluşturabilirsiniz.Aşağıda örnek mevcut.

div {
border: 1px solid #000000;
padding: 5px 5px 5px 15px;
-moz-border-radius-topleft: 10px;
}

Her bir köşe için ayrı ayrı değerler girerek farklı yuvarlaklıklar oluşturabilirsiniz.

div {
div {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
}
}