Radius Sudut

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 40 dari 76.

Dalam CSS, property border-radius digunakan untuk membuat sudut elemen menjadi membulat. Property ini memungkinkan kamu menentukan radius kelengkungan untuk setiap sudut, sehingga kamu dapat mengontrol bentuk border elemen. Berikut sintaks dasar untuk menggunakan property border-radius:

selector {
    border-radius: value;
}

value: Nilai radius yang diinginkan untuk sudut membulat, yang dapat ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya.

Kamu dapat menentukan satu nilai untuk menerapkan radius yang sama pada keempat sudut. Dalam contoh berikut, semua elemen <div> akan memiliki sudut membulat dengan radius 10px.

div {
    border-radius: 10px;
}

Kamu dapat mengatur nilai yang berbeda untuk setiap sudut secara terpisah, menggunakan urutan berikut: kiri atas, kanan atas, kanan bawah, kiri bawah.

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

Kamu juga bisa menentukan hanya dua nilai. Nilai pertama akan berlaku untuk sudut kiri atas dan kanan bawah, sedangkan nilai kedua akan berlaku untuk sudut kanan atas dan kiri bawah.

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

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua elemen <div>, masing-masing dengan class "one" dan "two". Ikuti langkah-langkah berikut:

Tulis aturan CSS menggunakan selector class untuk menargetkan semua elemen dengan class “one”. Atur border menjadi 3px solid #4287f5 dan border-radius menjadi 15px agar semua sudut memiliki bentuk membulat yang sama.
Tulis aturan CSS menggunakan selector class untuk menargetkan semua elemen dengan class “two”. Atur border ke nilai apa saja dan border-radius ke nilai apa saja pilihanmu.

Coba sendiri

<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>