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:

border-radius | CSS-Tricks

Yardımcı olabilecek araç:

Fancy Border Radius Generator

Örneklerin Codepen Linki:

LinkedIn|Email|GitHub|Twitter|Medium|BursaIO