v2.5.2
Giriş yap

CSS border-radius Özelliği

CSS3

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%;}

onuralpkaratas
2019 gün önce eklendi - 4592 kez görüntülendi.
Github'da Düzenle
Önceki letter-spacing Sonraki border-top-left-radius