Border Radius

Kotak dengan sudut tajam terasa kaku, dan hampir semua antarmuka modern mengatasinya dengan satu property: border-radius. Property ini melengkungkan sudut tepi luar border — dari lengkung halus 4px pada input, lingkaran penuh pada avatar, hingga bentuk pil pada tombol. Pada chapter ini kita mempelajari urutan nilainya, longhand untuk satu sudut tertentu, perbedaan px dan persen, serta pasangan overflow: hidden yang membuat gambar ikut mengikuti lengkung kartunya.

Dasar dan Urutan Nilai #

Shorthand border-radius menerima satu hingga empat nilai dengan pola yang sudah kita kenal dari padding dan margin — searah jarum jam mulai dari sudut kiri atas:

.kartu-profil {
  border-radius: 12px;          /* keempat sudut membulat */
}

.panel-obrolan {
  border-radius: 16px 16px 0 0; /* hanya dua sudut atas */
}

Demo berikut menampilkan keduanya:

Pola dua sudut atas itulah yang lazim dipakai gelembung chat yang menempel pada tombol kirim.

Radius per Sudut dan Pilihan Satuan #

Untuk menyasar satu sudut, gunakan longhand border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius. Nilainya boleh ditulis dalam px maupun persen, dan pilihan satuan menentukan bentuk akhirnya:

.avatar {
  width: 96px;
  height: 96px;         /* wajib persegi agar hasilnya lingkaran */
  border-radius: 50%;   /* setengah lebar dan setengah tinggi */
}

.foto-lanskap {
  width: 240px;
  height: 120px;
  border-radius: 50%;   /* bukan lingkaran, melainkan ellipse */
}

Demo berikut memakai radius 50% pada elemen persegi dan persegi panjang:

Karena itulah avatar selalu dibuat persegi — atau diberi aspect-ratio: 1 — sebelum diberi radius 50%.

Bentuk Pill dan Nilai Berlebihan #

Tombol dan lencana modern sering berbentuk pil. Caranya tidak perlu menghitung setengah tinggi elemen — cukup beri radius yang jauh melebihi kebutuhan:

.tombol-pill {
  padding: 10px 24px;
  border-radius: 999px;
}

Saat radius sudut yang bertemu saling tumpang-tindih, browser mengecilkan seluruh radius secara proporsional hingga pas — karenanya 999px aman untuk tombol dengan tinggi berapa pun dan lebih stabil daripada persen, yang nilainya bergantung pada lebar dan tinggi elemen.

Memotong Sudut Gambar dengan overflow: hidden #

Radius hanya melengkungkan background dan border elemen itu sendiri. Konten anak — terutama img — tetap menonjol menembus sudut yang sudah membulat. Solusinya satu pasang deklarasi:

.kartu-artikel {
  border-radius: 12px;
  overflow: hidden;     /* area di luar lengkung ikut memotong anak */
}

Demo berikut merangkai tiga bentuk dari property yang sama — lingkaran, pil, dan kartu ber-gambar. Blok gradien menggantikan gambar agar demo tetap mandiri tanpa berkas eksternal:

Kombinasi kartu ber-radius dan overflow: hidden menjadi standar de facto untuk kartu ber-gambar.

Kesalahan Umum #

Ringkasan #

border-radius membentuk sudut kotak dari lengkung kecil hingga lingkaran dan pil, dengan urutan nilai searah jarum jam dan longhand untuk sudut tertentu. Persen mengikuti lebar dan tinggi elemen — lingkaran pada kotak persegi, ellipse pada persegi panjang — sementara nilai 999px memberi bentuk pil yang stabil. Untuk kartu ber-gambar, pasangkan radius dengan overflow: hidden agar konten anak ikut terpotong. Kotak kini punya bentuk; chapter berikutnya menambah kedalaman visualnya lewat box-shadow.