CSS Yuvarlak Köşeler
CSS Yuvarlak Köşeler
CSS border-radiusözelliği ile herhangi bir öğeye "köşeleri yuvarlatılmış" verebilirsiniz.
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!
İşte üç örnek:
1. Belirtilen arka plan rengine sahip bir öğe için yuvarlatılmış köşeler:
Yuvarlatılmış köşeler!
2. Kenarlıklı bir öğe için yuvarlatılmış köşeler:
Yuvarlatılmış köşeler!
3. Arka plan görüntüsüne sahip bir öğe için yuvarlatılmış köşeler:
Yuvarlatılmış köşeler!
İşte kod:
Ö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;
}
İpucu: Özellik border-radiusaslında , ve özellikleri için
border-top-left-radiusbir border-top-right-radiuskestirme border-bottom-right-radius
özelliktir border-bottom-left-radius.
CSS border-radius - Her Köşeyi Belirt
Özellik border-radiusbir ila dört değere sahip olabilir. İşte kurallar:
Dört değer - sınır yarıçapı: 15px 50px 30px 5px; (birinci değer sol üst köşeye, ikinci değer sağ üst köşeye, üçüncü değer sağ alt köşeye ve dördüncü değer sol alt köşeye uygulanır):
Üç değer - sınır yarıçapı: 15px 50px 30px; (birinci değer sol üst köşeye, ikinci değer sağ üst ve sol alt köşelere 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öşeler için geçerlidir ve ikinci değer sağ üst ve sol alt köşeler için geçerlidir):
Bir değer - sınır yarıçapı: 15 piksel; (değer, eşit olarak yuvarlatılmış dört köşenin tümü için geçerlidir:
İşte kod:
Ö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;
}
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;
}
CSS Yuvarlak Köşe Özellikleri
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |