CSS Yuvarlak Köşeler

CSS Yuvarlak Köşeler

CSS ile border-radius Özellik, herhangi bir öğenin 'Yuvarlak Kenar' tarzını gerçekleştirebilir.

CSS border-radius Özelliği

CSS border-radius Özellik elemanın köşelerinin yarıçapını tanımlar.

İpucu：Bu özelliği kullanarak elemanlara yuvarlak köşe ekleyebilirsiniz!

Burada üç örnek var：

1. Belirli bir arka plan rengi olan elemanın yuvarlak köşeleri：

Yuvarlak köşe!

2. Kenarlı elemanın yuvarlak köşeleri：

Yuvarlak köşe!

3. Arka plan görseli olan elemanın yuvarlak köşeleri：

Yuvarlak köşe!

Bu kodu kullanın:

Örnek

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Kişisel olarak deneyin

İpucu：border-radius Özellik aslında aşağıdaki özelliklerin kısa isim özelliğidir：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Her köşeyi belirtme

border-radius Özellik bir ila dört değer kabul eder. Kurallar şu şekildedir：

Dört değer - border-radius: 15px 50px 30px 5px;（Ard arda sırasıyla kullanılır: sol üst köşe, sağ üst köşe, sağ alt köşe, sol alt köşe）：

Üç değer - border-radius: 15px 50px 30px;（İlk değer sol üst köşe için kullanılır, ikinci değer sağ üst ve sol alt köşeler için kullanılır, üçüncü değer sağ alt köşe için kullanılır）:

İki değer - border-radius: 15px 50px;（İlk değer sol üst ve sağ alt köşeler için kullanılır, ikinci değer sağ üst ve sol alt köşeler için kullanılır）:

Bir değer - border-radius: 15px;（Bu değer dört köşe için kullanılır, tüm yuvarlak köşeler aynıdır）：

Bu kodu kullanın:

Örnek

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Kişisel olarak deneyin

Hafifçe eliptik köşeler de oluşturabilirsiniz:

Örnek

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Kişisel olarak deneyin

CSS yuvarlak köşe özelliği

Özellik Açıklama
border-radius Bütün dört border-*-*-radius özelliklerinin kısa isim özelliği olarak kullanılır.
border-top-left-radius Sol üst köşe çerçeve şeklini tanımlar.
border-top-right-radius Sağ üst köşe çerçeve şeklini tanımlar.
border-bottom-right-radius Sağ alt köşe çerçeve şeklini tanımlar.
border-bottom-left-radius Sol alt köşe çerçeve şeklini tanımlar.