Border Radius

Sudut yang melengkung mengubah kesan antarmuka secara halus: kartu dengan sudut tumpul terasa lebih santai, tombol pil terasa lebih ramah, dan foto profil berbentuk lingkaran menjadi pola yang dikenali semua orang. Properti border-radius melengkungkan sudut kotak elemen — latar, border, dan bayangan kotak ikut terpotong mengikuti lengkungan. Pada Chapter ini kita mulai dari satu nilai untuk keempat sudut, lanjut ke pengaturan per sudut, lalu menutup dengan tiga bentuk populer: lingkaran, pil, dan elips.

Satu Nilai untuk Empat Sudut #

Bentuk penulisan yang paling sering dipakai adalah satu nilai yang berlaku seragam:

.kartu {
  border-radius: 12px;
}

Nilainya dapat berupa satuan panjang (px, em, rem) atau persentase. Keduanya memiliki makna yang berbeda: panjang dihitung dari tepi kotak, sedangkan persentase dihitung relatif terhadap ukuran kotak — komponen horizontalnya relatif terhadap lebar dan komponen vertikalnya relatif terhadap tinggi. Akibatnya, border-radius: 10% pada kotak 200×100px menghasilkan lengkungan 20px di arah horizontal tetapi hanya 10px di arah vertikal, sehingga bentuknya tidak seragam bila kotak tersebut bukan persegi.

Nilai yang terlalu besar tidak menghasilkan kelainan bentuk: browser memangkas seluruh radius secara proporsional agar lengkungan tetap muat di dalam kotak. Karena itu penulis desain sering menggunakan nilai ekstrem seperti 9999px untuk membentuk sisi yang membulat penuh, tanpa perlu menghitung ukuran persisnya.

Menyetel Tiap Sudut #

Satu deklarasi border-radius dapat menampung hingga empat nilai yang dibaca searah jarum jam, dimulai dari sudut kiri atas:

.kartu-per-sudut {
  border-radius: 4px 24px 4px 24px;
}

1. Nilai pertama (4px): sudut kiri atas (top-left).
2. Nilai kedua (24px): sudut kanan atas (top-right).
3. Nilai ketiga (4px): sudut kanan bawah (bottom-right).
4. Nilai keempat (24px): sudut kiri bawah (bottom-left).

Hasilnya berbentuk seperti daun: dua sudut hampir lancip di kiri-atas dan kanan-bawah, dua sudut lembut di kanan-atas dan kiri-bawah. Bila Anda hanya butuh menyentuh satu sudut, gunakan longhand seperti border-top-left-radius — ada satu longhand untuk setiap sudut, sehingga gaya yang telah ada tidak perlu ditulis ulang.

Jumlah nilai dalam satu deklarasi juga fleksibel. Dua nilai dipakai berpasangan: nilai pertama untuk sudut kiri-atas dan kanan-bawah, nilai kedua untuk kanan-atas dan kiri-bawah. Tiga nilai menempatkan nilai kedua pada dua sudut yang menyentuh sisi kanan dan kiri. Pola pembacaan ini identik dengan urutan nilai pada shorthand padding dan margin, sehingga tidak perlu dihafal terpisah.

Lingkaran, Pil, dan Elips #

Tiga bentuk khas dibangun dari properti yang sama. Lingkaran sempurna dibentuk dari persegi dengan radius setengah ukurannya — ditulis sebagai 50% agar tetap benar bila ukurannya berubah:

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

Tombol pil memakai radius yang jauh lebih besar dari setengah tingginya, misalnya 9999px, sehingga kedua ujungnya membulat sempurna tanpa perlu menghitung tinggi tombol:

.tombol-pil {
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
}

Bentuk ketiga adalah elips, yang membutuhkan sintaks dua radius: nilai di muka garis miring adalah radius horizontal dan nilai di belakangnya adalah radius vertikal:

.elips {
  width: 200px;
  height: 120px;
  border-radius: 50% / 25%;
}

Pada contoh di atas setiap sudut mempunyai radius horizontal 50% dari lebar (100px) dan radius vertikal 25% dari tinggi (30px), sehingga keempat sudut menyatu menjadi elips yang halus. Nilai computed-nya dapat diperiksa di panel DevTools: border-top-left-radius tercatat sebagai 50% 25% — dua angka karena horizontal dan vertikalnya berbeda.

Hasil di Browser:

Kartu pertama memiliki keempat sudut melengkung 12px.
Kartu kedua bergantian 4px dan 24px: computed border-top-left-radius
4px, border-top-right-radius 24px. Lingkaran dibentuk dari persegi
120 × 120px dengan radius 50%. Tombol pil tercatat 9999px, sedangkan
elips "50% / 25%" menghasilkan computed border-top-left-radius
"50% 25%" — radius horizontal dan vertikalnya berbeda.

Demo lengkap chapter ini menampilkan kelima variasi di atas. Setiap elemen membawa atribut data-expected yang memeriksa nilai computed — termasuk bentuk dua angka pada elips — sehingga hasil yang dijelaskan dapat diverifikasi otomatis oleh harness uji Course ini.