CSS border-radius Özelliği
Kenarların ovalliğini ayarlamak için kullanılır. Dört değere sahip olabilir ancak tek tekte kullanılabilir. Örneklerde detayları anlatılmıştır.
Yapısı (Syntax)border-radius: uzunluk | <%> | initial | inherit;
| Varsayılan Değer | 0 |
| JavaScript Yapısı |
object.style.borderRadius="Değer"
|
| Animasyon Özellikleri Uygulanabilir | Evet (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| uzunluk | Köşeleri yuvarlatırken px, pt, cm, em gibi değerler kullanılabilir. | CSS3 |
| % | Yüzde (%) değeri kullanarak köşeler yuvarlatılabilinir. | CSS3 |
| initial | Varsayılan değerine geri döndürür. | CSS3 |
| inherit | Değerini üst öğesinden miras alır. | CSS3 |
Örnekler
Dört değer kullanmak istersek: İlk değer olan (10px) sol üst köşeye uygulanır, ikinci değer olan (40px) sağ üst köşeye uygulanır, üçüncü değer olan (20px) sağ alt köşeye uygulanır ve dördüncü değer olan (7px) sol alt köşeye uygulanmış olur.
div { border-radius: 10px 40px 20px 7px; }Üç değer kullanmak istersek: İlk değer olan (10px) sol üst köşeye uygulanır, ikinci değer olan (40px) sağ üst ve sol alt köşelere uygulanır ve üçüncü değer olan (20px) sağ alt köşeye uygulanmış olur.
div { border-radius: 10px 40px 20px; }İki değer kullanmak istersek: İlk değer olan (10px), sol üst ve sağ alt köşelere uygulanır, ikinci değer olan (40px) sağ üst ve sol alt köşelere uygulanmış olur.
div { border-radius: 10px 40px; }Bir değer kullanmak istersek: (10px) olan değer dört köşeyede uygulanmış olur.
div { border-radius: 10px; }Ayrıca 50% ya da 100% değer vermek tam bir yuvarlak oluşturmanızı sağlar. Yüzdeli vermedende yükseklik kadar radius belirtilirse yine tam bir oval oluşturulur.
img {
width: 50px;
height:50px;
order-radius: 50%;}