border-radius Özelliği

border-radius özelliği, kenarlık ve arka plan için yuvarlatılmış köşeler oluşturur. Özelliğin değeri olarak herhangi bir boyut birimi kullanılabilir. Varsayılan değer: 0. Şu özellikler için bir kısaltmadır: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sözdizimi

seçici {
	border-radius: değer;
}

Değer Sayısı

Özellik, boşlukla ayrılmış olarak 1, 2, 3 veya 4 değer alabilir:

Sayı	Açıklama
`1`	Tüm köşeler için aynı anda.
`2`	İlk değer üst sağ ve alt sol köşeler için yuvarlatmayı belirler, ikincisi - üst sol ve alt sağ için.
`3`	İlk değer üst sol köşe için yuvarlatmayı belirler, ikincisi - aynı anda üst sağ ve alt sol için, üçüncüsü ise alt sağ köşe için.
`4`	İlk değer üst sol köşe için yuvarlatmayı belirler, ikincisi - üst sağ için, üçüncüsü - alt sağ köşe için, dördüncüsü ise alt sol köşe için.

Elips Yuvarlatma

Eğik çizgi ile ayrılan iki değer, eliptik yuvarlatma ayarlar. Eğik çizgiden önceki değer yatay yuvarlatmayı, eğik çizgiden sonraki değer ise dikey yuvarlatmayı belirtir:

seçici {
	border-radius: yatay / dikey;
}

Birden fazla köşe için yuvarlatma belirlenirse, eğik çizgiden önce tüm yatay yuvarlatmalar, ondan sonra ise tüm dikey yuvarlatmalar listelenir.

Örnek

Tüm köşeler için 10px yuvarlatma ayarlayalım:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Örnek

Noktalı kenarlık için yuvarlatmaların nasıl göründüğüne bakalım:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Örnek

Bir köşegenin köşeleri için 10px, ikinci köşegenin köşeleri için ise 40px yuvarlatma ayarlayalım:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Örnek

Üst sol köşe için 10px, alt sağ köşe için 30px ve ikinci köşegenin köşeleri için 50px yuvarlatma ayarlayalım:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Örnek

Her bir köşe için farklı yuvarlatmalar ayarlayalım:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Örnek

Elips yuvarlatma yapalım, yuvarlatmanın yatay kısmı için 20px, dikey kısmı için ise 40px ayarlayalım:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Örnek

Şimdi tüm köşeler için ayrı ayrı farklı elips yuvarlatma ayarlayalım:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Örnek

Kare bir blok için, kenar uzunluğunun yarısına eşit bir yuvarlatma ayarlanırsa, bir daire elde edilir:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Örnek

Yuvarlatma, karenin kenarından daha büyük ayarlanırsa, yine de bir daire elde edilir:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Örnek

Ayrıca, border-radius değerini 50% olarak ayarlayarak da bir daire elde edilebilir (avantajı, karenin boyutları değiştiğinde yuvarlatmayı değiştirmeye gerek olmamasıdır):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Örnek

Bir dikdörtgen için border-radius yüzde olarak ayarlanırsa, elips yuvarlatma elde edilir. Genişlik 400px, yükseklik 200px ve border-radius 10% olarak ayarlanırsa, bu 40px/20px yazmakla aynıdır:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Örnek

Bir dikdörtgen için border-radius değerini 50% olarak ayarlayalım - bir elips elde ederiz:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Örnek

border-radius özelliği sadece kenarlık köşelerini değil, aynı zamanda arka planı da yuvarlatır:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Ayrıca Bakınız

kenarlık için kısaltma özelliği olan border özelliği