CSS Dersleri 35 - Border-radius Kullanımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Border-Radius ile Kenar Ovalleştirme Konusunu öğreneceğiz.

CSS'de herhangi bir ögenin kenarlarını ovalleştirmek veya yuvarlaklaştırmak için border-radius özelliği kullanılır.

CSS Border-radius kullanımı

CSS'de border-radius özelliği, bir ögenin köşelere ait ovalliğini tanımlanabilir.

#radius {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Yukarıdaki id değerine sahip etiketlerin kenarlarının ovalleştiğini göreceksiniz.

İpucu: border-radius özelliği aslında border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius özellikleri için bir kısa kullanımdır.

CSS'de belirli kenarları ovalleştirmek

CSS'de border-radius özelliği bir ila dört değere sahip olabilir. İşte bu kurallar:

4 Değer ile Kullanım

border-radius özelliğine sırası ile sol üst,sağ üst,sağ alt ve sol alt olmak üzere köşe değerlerini tek tek girebilirsiniz.

border-radius : 15px 50px 30px 5px;

3 Değer ile Kullanım
border-radius özelliğini 3 değer ile kullanabilirsiniz. Bu değerlerin ilki sol üst köşeyi, ikincisi sağ üst köşeyi , üçüncüsü ise sol alt ve sağ alt köşeleri temsil eder.

border-radius : 15px 50px 30px;

2 Değer ile Kullanım

border-radius özelliğini 2 değer ile kullanabilirsiniz. Bu değerlerin ilki sol üst ve sağ alt köşeleri, ikincisi ise sağ üst ve sol alt köşeleri temsil eder. Kısacası çapraz köşeleri temsil eder.

border-radius : 15px 50px;