Mengenal Border Radius

Border-radius adalah properti yang digunakan untuk mengatur radius dari sudut elemen. Sudut elemen biasanya siku-siku, dengan properti sudut dapat diatur menjadi melengkung.

Properti border-radius yang tidak diatur di css pada dasarnya akan bernilai 0. Berikut tampilan elemen yang tidak diatur border-radius nya.

Berikut ini contoh baris program dimana border-radius dari elemen diatur.

.contoh { border-radius: 10px; }

Berikut hasilnya:

Satuan %

Satuan nilai dari properti ini selain px adalah %. Berikut contoh penulisan dengan menggunakan satuan %.

.contoh { border-radius: 10%; }

Berikut hasilnya:

Dua Nilai

Pada contoh yang dijelaskan sebelumnya, border-radius hanya memiliki sebuah nilai dimana digunakan untuk mengatur keempat sudut. Keempat sudut tersebut juga bisa diatur dengan menggunakan dua nilai pada property border-radius.

Berikut adalah contoh penulisan properti border-radius dengan dua nilai.

.contoh { border-radius: 20px 5px; }

Berikut hasilnya:

Dapat anda lihat bahwa radius sudut sebesar 20px pada sudut kiri-atas dan kanan-bawah. Dan radius sudut sebesar 5px pada sudut kiri-bawah dan kanan-atas.

Tiga Nilai

Besar radius sudut juga dapat diatur dengan menggunakan tiga nilai pada properti border-radius.

.contoh { border-radius: 0px 20px 10px; }

Berikut hasilnya:

Nilai pertama mengatur sudut kiri-atas, nilai kedua mengatur sudut kanan-atas dan kiri-bawah, dan nilai ketiga mengatur sudut kanan-bawah.

Empat Nilai

Properti ini juga bisa dituliskan dengan 4 nilai. Setiap nilai mewakili sebuah sudut. Berikut contoh penulisannya.

.contoh { border-radius: 0px 5px 15px 40px; }

Berikut hasilnya:

Nilai pertama mewakili sudut kiri-atas, nilai kedua mewakili sudut kanan-atas, nilai ketiga mewakili sudut kanan-bawah, dan nilai keempat mewakili sudut kiri-bawah.

Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

Sekian, Semoga bermanfaat