border-radius membulatkan sudut kotak. Nilainya adalah seberapa besar lengkungan di tiap sudut: 0 tajam, 12px agak bulat, dan 50% di kotak persegi bikin lingkaran. Kotaknya gak perlu punya border, background-nya ikut terpotong bulat.
🧪 Tebakan cepat: kotak 200 × 100px diberi
border-radius: 50%. Hasilnya lingkaran? Tebak dulu, jawabannya ada di bagian "50%: lingkaran atau elips".
Membulatkan sudut
<div class="box"></div>
<style>
.box {
width: 160px;
height: 160px;
background-color: orange;
border-radius: 12px;
}
</style>
.boxadalah selector: aturan di dalam{ }berlaku buat elemen denganclass="box".widthdanheightbikin kotak persegi 160 × 160px, danbackground-colormewarnainya oranye.border-radius: 12pxmembulatkan keempat sudutnya. Bayangkan lingkaran kecil berjari-jari 12px ditaruh di tiap sudut: sudutnya ikut melengkung mengikuti lingkaran itu. Makin besar angkanya, makin bulat.
Hasilnya, kotak oranye dengan sudut yang membulat lembut. Satu nilai berlaku buat keempat sudut. Nilainya butuh satuan: 12px atau 50%, bukan 12 atau 50.
50%: lingkaran atau elips
border-radius: 50% di kotak persegi bikin lingkaran sempurna. Persennya dihitung dari ukuran kotak itu sendiri: 50% dari 160px adalah 80px, setengah sisinya, jadi tiap sudut melengkung sampai bertemu di tengah sisi.
Jawaban tebakan: bukan lingkaran. Persen dihitung terpisah, lengkungan mendatar dari lebar dan lengkungan tegak dari tinggi. Di kotak 200 × 100px, hasilnya elips (bulat lonjong). Mau lingkaran? Samakan dulu width dan height. Mau bentuk pil (ujung kiri-kanan bulat penuh)? Pakai angka px yang besar, misalnya border-radius: 999px.
Kenapa 50%, bukan 80px? Hasilnya sama di kotak 160px, tapi 50% tetap jadi lingkaran walaupun ukuran kotaknya diganti.
Sudut yang berbeda-beda
Tiap sudut punya properti sendiri. Ini cuma membulatkan sudut kiri atas:
.box {
border-top-left-radius: 10px;
}
Tiga lainnya: border-top-right-radius, border-bottom-right-radius dan border-bottom-left-radius. Bisa juga empat nilai dalam satu baris, dibaca searah jarum jam mulai dari kiri atas: kiri atas, kanan atas, kanan bawah, kiri bawah. Gelembung chat yang sudut kiri bawahnya tajam:
.chat {
border-radius: 16px 16px 16px 0;
}
⚠️ Jebakan yang sering ketemu
- Salah ketik nama properti.
border-raduisatauborder-radiousgak dikenal browser, jadi diabaikan diam-diam. - Gambar di dalam kotak bulat tetap kotak. Isi kotak bisa nongol di sudutnya. Tambahkan
overflow: hiddendi kotaknya biar isinya ikut terpotong. - Menulis ukuran di HTML.
border-radiusadalah CSS, jadi tulis di dalam aturan selector di<style>, bukan sebagai atribut di tag.
TL;DR: border-radius membulatkan sudut: satu nilai buat keempat sudut, atau empat nilai searah jarum jam dari kiri atas. border-radius: 50% di kotak persegi jadi lingkaran, di kotak memanjang jadi elips, karena persennya dihitung dari lebar dan tinggi masing-masing. Satu sudut saja? Pakai properti sudutnya, misalnya border-top-left-radius.
