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

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

Değer Sayısı

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

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:

cssseç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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Ayrıca Bakınız