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.