CSS Border-Radius Kullanımı
#one{
border-radius:10px
}
Yukarıda ki örnekte border-radius’a tek bir değer verdiğimizde bileşenin bütün köşelerine aynı değeri uygular.
#two{
border-radius:5px 20px}
Border-radius’a iki değer verdiğimizde ilk değer sol-üst ve sağ-alt köşeler, ikinci değer kalan çapraz köşelere değerleri uygular.
#three{
border-radius:5px 40px 20px;}
Border-radius’a üç değer verdiğimizde ilk değer sol-üst, ikinci değer sağ-üst ve sol-alt ve son değer sağ-alt köşeye değerleri uygular.
#four{
border-radius:5px 30px 10px 50px;}
Dört değer verdiğimizde ise sol-üst köşeden başlayarak ters c şeklinde bütün köşeler değerleri uygular.
Yanda ki örnekte her bir köşenin yatay ve dikey (horizontal & veritcal) değerlerini spesifik olarak belirtmiş olduk. Bu sayede bileşene daha spesifik şekiller verebiliriz.
Yararlanılan kaynak:
Yardımcı olabilecek araç:
Örneklerin Codepen Linki: