CSS Kutu Köşelerinin Yuvarlatılması

CSS ile kutu köşelerini yuvarlatmak için border-radius özelliğini kullanabilirsiniz. Bu özellik, bir öğenin köşelerini istediğiniz miktarda yuvarlamak için kullanılır. İki değer alabilir: yatayda ve dikeyde yuvarlama miktarı.

İşte border-radius özelliğinin kullanımı:

div {
  border-radius: 10px; /* Yatayda ve dikeyde 10 piksel yuvarlama */
}

veya farklı yatay ve dikey yuvarlama miktarları belirlemek için:

div {
  border-radius: 20px 10px; /* Yatayda 20 piksel, dikeyde 10 piksel yuvarlama */
}

Ayrıca, köşeleri belirli bir köşe üzerinde yuvarlamak için:

div {
  border-top-left-radius: 10px; /* Sol üst köşeyi 10 piksel yuvarla */
  border-top-right-radius: 20px; /* Sağ üst köşeyi 20 piksel yuvarla */
  border-bottom-right-radius: 30px; /* Sağ alt köşeyi 30 piksel yuvarla */
  border-bottom-left-radius: 5px; /* Sol alt köşeyi 5 piksel yuvarla */
}

Bu özelliklerle, kutu köşelerini yuvarlamanın yanı sıra, her bir köşenin ayrı ayrı yuvarlama miktarını belirleyebilirsiniz. Bu, özellikle modern ve yuvarlak tasarımlar oluşturmak için kullanışlıdır.