Kenarlık Yarıçapı

Coddy'nin HTML Journey'sinin Styling with CSS 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 için kullanılır. Bu özellik, her bir köşe için kavis yarıçapını belirlemenize olanak tanıyarak öğenin kenarlık şekli üzerinde kontrol sahibi olmanızı sağlar. İşte border-radius özelliğini kullanmak için temel sözdizimi:

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

Size, her biri "one" ve "two" sınıflarına sahip iki <div> öğesi içeren bir HTML belgesi verilmiştir. 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 border özelliğini 3px solid #4287f5 ve border-radius özelliğini 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. border özelliğini herhangi bir değere ve border-radius özelliğini seçtiğiniz herhangi bir değere ayarlayın.

Kopya kağıdı

border-radius özelliği, öğeler için yuvarlatılmış köşeler oluşturur:

selector {
    border-radius: value;
}

Değerler piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilebilir.

Tek değer - tüm köşelere aynı yarıçapı uygular:

div {
    border-radius: 10px;
}

Dört değer - her bir köşe için ayrı ayrı (sol üst, sağ üst, sağ alt, sol alt):

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

İki değer - ilki sol üst ve sağ alt köşelere, ikincisi ise sağ üst ve sol alt köşelere uygulanır:

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

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>