CSS3 Border Radius ile Yuvarlak Köşeler

CSS3 Yuvarlatılmış köşeler, kenarlık yarıçapı özelliğini kullanarak gövdeye veya metne özel renkli köşe eklemek için kullanılır. Görüntünün tüm köşelerini yuvarlayabilir veya yalnızca köşeleri seçebilir, yarıçapı farklı köşelerde değiştirebilir veya görüntüyü oval veya daire şeklinde görüntüleyebilirsiniz.

Daha önceki CSS sürümlerini, görüntüleri ve HTML tablolarını kullanarak köşeleri yuvarlatılmış bir kutu oluşturduysanız, bunun ne kadar zor ve yorucu olduğunu biliyorsunuz, Daha önce dört resim oluşturmak zorunda kaldınız (her köşe için bir tane) ve köşeler aynı hizada dizmek için her şeyi dikkatlice nasıl ayarlamak zorunda kaldınığızı Bilirsiniz.

Eski tekniği denemiş olsanız da olmasanız da, CSS3 border-radius kullandığınızda, yuvarlatılmış köşeleri oluşturmanın ne kadar kolay olduğunu takdir edersiniz.

border-radius kullandığınızda, yuvarlatılmış köşeleri oluşturmak için yarıçapın uzunluğunu değer olarak belirtirsiniz. Daha sonra yuvarlak köşelerinizi istediğiniz kadar yuvarlak hale getirebilir ve stili kutunun herhangi bir köşesine veya tümüne uygulayabilirsiniz. Aşağıda ki görüntü, yarıçapı değiştirmenin eğri köşeyi nasıl değiştirdiğini görmenize yardımcı olmak için tasarlanmış bir şema görüyorsunuz.

border-radius , <div> etiketi veya <h1> etiketi gibi herhangi bir kutu nesnesine uygulayabilirsiniz . CSS3'te yuvarlatılmış köşeler oluşturma sözdizimi ( r , yarıçapı, dairenin merkezinden kavisli köşeye kadar olan mesafeyi gösterir):

CSS border-radius Özellik

CSS border-radius özelliği, bir elemanın köşelerinin yarıçapını tanımlar.

İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar!

Bununla ilgili üç özellik yapalım.

1. Belirtilen arka plan rengine sahip bir eleman için yuvarlatılmış köşeler:

#test1{

  border-radius: 25px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}
	

ÇIKTI:

2. Kenarlıklı bir eleman için yuvarlatılmış köşeler:

#test2 {
  border-radius: 25px;

  border: 2px solid #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}

ÇIKTI:

3. Arka plan görüntüsü olan bir eleman için yuvarlatılmış köşeler:

#test3 {
  border-radius: 25px;

  background: url(morocco.jpg);

  background-position: left top;

  background-repeat: repeat;

  padding: 20px;

  width: 200px;

  height: 150px; 
}

ÇIKTI:

CSS Yuvarlatılmış Köşeler:İpuçları

• CSS yuvarlatılmış köşeleri herhangi bir HTML öğesine uygulanabilir.
• border-radius özellik yuvarlatılmış kenarlar oluşturmak için kullanılır.
• border-radius :Tek tek köşeleri şekillendiren CSS kenarlık stili özellikleri için kısa bir özelliktir.
• border-radius :CSS3'te yeni tanıtıldı.

Köşeleri yuvarlatmak için kullanılan tüm CSS kenarlık stili özellikleri ile aşağıdaki tabloya bir göz atın:

CSS Yuvarlatılmış Köşeler: Her Köşeyi Belirtin

border-radius değeri belirtildiğinde, CSS yuvarlatılmış köşeleri 4 kenara da uygulanır. Ancak, her köşe bu kurallarla ayrı ayrı belirlenebilir:

Dört değer: border-radius:15px 50px 30px 5px (sol üst, sağ üst, sağ alt ve sol alt köşe):

Üç değer: border-radius:15px 50px 30px; (ilk değer sol üst köşeye uygulanır, ikinci değer sağ üst ve sol alt köşelere uygulanır ve üçüncü değer sağ alt köşeye uygulanır):

İki değer: border-radius:15px 50px; (ilk değer, sol üst ve sağ alt köşelere uygulanır ve ikinci değer sağ üst ve sol alt köşelere uygulanır):

Bir değer: border-radius:15px; (Değer, eşit olarak yuvarlanmış dört köşeye uygulanır.)

Eliptik Köşeler Oluşturma

Eliptik köşeler ayrıca CSS border-radius kullanılarak da oluşturulabilir. Değerler arasında boşluk karakteri bırakmak yerine, iki değer arasına eğik çizgi sembolü (/) eklemeniz gerekir.

Örnekler verirsek:

#eliptik1 {

  border-radius: 50px / 15px;

  background: #3498db;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}	

ÖRNEK 2:

#eliptik2 {
  border-radius: 15px / 50px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px; 
}

ÖRNEK 3:

#eliptik3 {

  border-radius: 50%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

Bazı Örnekler:

#test1 {

  border-radius: 25% 10%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 2:

#test2 {

  border-radius: 10% 30% 50% 70%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 3:

#test2 {

  border-radius: 10% / 50%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 4:

#test3 {

  border-radius: 10px 100px / 120px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

ÖRNEK 4:

#test4 {

  border-radius: 50% 20% / 10% 40%;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;
} 

ÇIKTI:

CSS border-radius Özet

Artık herhangi bir elemanı kolaylıkla yuvarlayabilirsiniz. Henüz okumadıysanız, CSS borders ve CSS backgrounds konularını okuyun. Şimdilik bilgileri özetleyelim:

• Herhangi bir HTML öğesinde CSS köşeleri yuvarlatılmış olabilir;
• border-radius kestirme stilini kullanarak yuvarlak kenarlar oluşturuyoruz;
• Yuvarlak köşeler genellikle background-color , background-image ve border CSS stil özellikleriyle birlikte kullanılır.
• Ayrıca her köşe için ayrı ayrı border-radius stil özelliklerini ayrı ayrı kullanabilirsiniz;
• CSS kurallarına göre border-radius, bir ila dört arası kaç değer atayacağınıza bağlı olarak farklı bir etkiye sahip olacaktır.