CSS Yuvarlak Köşeler

CSS Yuvarlak Köşeler

CSS ile border-radius Özellik, herhangi bir öğenin 'yuvarlak köşe' 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 elemana yuvarlak köşeler ekleyebilirsiniz!

Burada üç örnek var：

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

Yuvarlak köşeler!

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

Yuvarlak köşeler!

3. Arkasında arka plan resmi olan elemanın yuvarlak köşeleri：

Yuvarlak köşeler!

Bu kod budur:

Ö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; 
}

Kendi kendine deneyin

İpucu：border-radius Özellik aslında aşağıdaki özelliklerin kısa adıdır：

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

CSS border-radius - Her köşeyi belirtin

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

Dört değer - border-radius: 15px 50px 30px 5px;（Aşağıdaki gibi 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，ikincisi sağ üst ve sol alt köşeler için，üçüncüsü sağ alt köşe için）：

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

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

Bu kod budur:

Ö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; 
}

Kendi kendine deneyin

Hafifçe yuvarlak 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;
}

Kendi kendine deneyin

CSS Kenar Yuvarlaklık Özelliği

Özellik Açıklama
border-radius Bütün dört border-*-*-radius özelliklerinin kısa adı özelliği.
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 Alt sağ köşe çerçeve şeklini tanımlar.
border-bottom-left-radius Sol alt köşe çerçeve şeklini tanımlar.