Kenar Yarıçapı

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 40 / 76.

CSS'te border-radius özelliği, bir öğe için yuvarlatılmış köşeler oluşturmak amacıyla kullanılır. Bu özellik, her köşedeki eğriliğin yarıçapını belirtmenize olanak tanıyarak öğenin kenarlığının şekli üzerinde kontrol sahibi olmanızı sağlar. border-radius özelliğini kullanmanın temel söz dizimi şö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 birimleri cinsinden belirtilebilir.

Dört köşenin tamamına aynı yarıçapı uygulamak için tek bir değer belirtebilirsiniz. Aşağıdaki örnekte, tüm <div> öğeleri 10px yarıçapında yuvarlatılmış köşelere sahip olacaktır.

div {
    border-radius: 10px;
}

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

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

Ayrıca sadece iki değer belirtebilirsiniz; ilk değer sol üst ve sağ alt köşelere, ikinci değer ise sağ üst ve sol alt köşelere uygulanacaktır.

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

Görev

Kolay

Her biri "one" ve "two" sınıflarına sahip iki <div> öğesi içeren bir HTML belgesi verildi. Aşağıdaki adımları izleyin:

"one" sınıfına sahip tüm öğeleri hedeflemek için bir sınıf seçici kullanarak bir CSS kuralı yazın. Tüm köşelere aynı yuvarlatılmış şekli vermek için kenarlığı 3px solid #4287f5 ve kenarlık yarıçapını 15px olarak ayarlayın.
"two" sınıfına sahip tüm öğeleri hedeflemek için bir sınıf seçici kullanarak bir CSS kuralı yazın. Kenarlığı istediğiniz herhangi bir değer ve kenarlık yarıçapını istediğiniz herhangi bir değer olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>