Coba bandingin desain web jaman 2005 (kotak-kotak tajam kayak Excel) sama desain modern (semua sudut bulat lembut). Salah satu pembeda utama: border-radius. Sudut yang dibulet-buletin kasih kesan lembut, ramah, modern. Sudut tajam kasih kesan formal, kaku, korporat. Pilihan kecil yang ngubah feeling drastis.

💡 Trik bikin lingkaran sempurna. Set border-radius: 50% di elemen yang width = height, jadi lingkaran. Tapi kalau dimensinya beda? Jadi oval. Mau avatar bundar dari foto kotak? Wrap di div square dengan overflow: hidden + border-radius: 50%.

Berikut contoh penggunaan properti border-radius:

border-radius: 5px;

Bisa dikasih nilai per-sudut (top-left, top-right, bottom-right, bottom-left) atau pakai % buat bikin bulatan proporsional.

🎭 Analogi sehari-hari

border-radius = gunting sudut kertas. Sudut tajam (0) → sudut bulat (px) → lingkaran sempurna (50% di square).

⚠️ Jebakan yang sering ditemui

• border-radius: 50% bikin lingkaran cuma kalau width = height. Kalau persegi panjang, jadi oval.
• Beda 4 sudut: border-radius: 10px 20px 30px 40px (TL, TR, BR, BL — searah jarum jam dari atas-kiri).
• Border-radius diabaikan oleh outline — outline tetap kotak.
• Background berwarna spill di luar rounded corner — set overflow: hidden di parent kalau child mau dipotong.
• Image di dalam rounded box perlu overflow: hidden di parent untuk dipotong rapi.
• Animation border-radius smooth tapi box-shadow mungkin tidak follow — kombinasi tricky.