Kenar Yarıçapı

CSS'de border-radius özelliği, bir öğenin köşelerini yuvarlatmak için kullanılır. Bu özellik, her köşenin eğrilik yarıçapını belirlemenize olanak tanır ve öğenin kenarlığının şekli üzerinde kontrol sahibi olmanızı sağlar.  border-radius özelliğini kullanmanın temel sözdizimi şöyledir:

selector {
    border-radius: value;
}

value: Yuvarlatılmış köşeler için istenen yarıçap; piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleriyle belirtilebilir.

• Dört köşenin tümüne aynı yarıçapı uygulamak için tek bir değer belirtebilirsiniz. Aşağıdaki örnekte, tüm <div> öğelerinin köşeleri 10px yarıçapıyla yuvarlatılır. 

div {
    border-radius: 10px;
}

• Her köşe için farklı değerleri aşağıdaki sırayı kullanarak ayrı ayrı ayarlayabilirsiniz: sol üst, sağ üst, sağ alt, sol alt. 

.button {
    border-radius: 10px 20px 30px 40px;
}

• Ayrıca yalnızca iki değer belirtebilirsin; ilk değer sol üst ve sağ alt köşelere, ikinci değer ise sağ üst ve sol alt köşelere uygulanır. 

img {
    border-radius: 20px 50px;
}