cssborder-radiusdesainPemula4 mnt baca

Border Radius: Sudut Membulat

Membuat sudut membulat, lingkaran sempurna, dan bentuk pil. Shorthand dua nilai yang jarang diketahui.

Dasar border-radius

css

.kartu {
  border-radius: 12px; /* semua sudut */
}

Nilai bisa per sudut, searah jarum jam dari kiri atas:

css

.kotak {
  border-radius: 10px 20px 30px 40px; /* TL TR BR BL */
}

Lingkaran dan pil

css

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* lingkaran sempurna */
}

.tombol-pil {
  padding: 10px 24px;
  border-radius: 999px; /* bentuk pil, aman untuk tinggi berapa pun */
}

border-radius: 50% pada kotak persegi menghasilkan lingkaran sempurna. Untuk tombol, 999px lebih aman dari 50% karena tidak bergantung pada tinggi elemen.

Shorthand dua nilai (elips)

Setiap sudut sebenarnya punya dua radius: horizontal dan vertikal, dipisahkan garis miring:

css

.kartu {
  border-radius: 20px / 10px; /* sudut elips */
}

Jarang dipakai sehari-hari, tapi berguna untuk bentuk organik.

Catatan teknis: border-radius memotong background dan border, tapi TIDAK memotong konten anak yang overflow. Kalau gambar di dalam kartu kotak keluar dari sudut membulat, tambahkan overflow: hidden pada kartu.

Analogi: mengampelas sudut

Border-radius seperti mengampelas sudut meja yang tajam: makin besar radius, makin bulat. 50% pada persegi = lingkaran sempurna karena tiap sudut "terampelas" habis.

Kenapa radius penting untuk desain?

Sudut tajam terasa kaku dan "teknis"; sudut bulat terasa ramah dan modern. Perhatikan aplikasi yang kamu pakai: tombol, kartu, avatar hampir selalu membulat. Radius adalah pembeda instan antara "desain 2005" dan "desain modern".

Contoh bertahap: dari kotak ke pil

Kotak biasa:

css

.kotak {
  background: #38bdf8;
  padding: 20px;
}

Kartu modern:

css

.kartu {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Tombol pil dan avatar:

css

/* Pil: radius setengah tinggi (atau 999px agar aman) */
.tombol-pil {
  padding: 12px 28px;
  border-radius: 999px;
  background: #38bdf8;
  color: white;
}

/* Avatar lingkaran */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

Kenapa 999px bukan 50% untuk pil? 50% pada tombol lonjong menghasilkan elips aneh (radius relatif terhadap lebar DAN tinggi). 999px selalu membulat maksimal menjadi pil.

Radius per sudut:

css

/* Hanya sudut atas membulat (pola kartu dengan gambar header) */
.kartu-gambar img {
  border-radius: 16px 16px 0 0; /* atas-kiri, atas-kanan, bawah-kanan, bawah-kiri */
}

Kesalahan umum pemula

Salah: radius tanpa overflow hidden untuk gambar. Gambar di dalam kartu membulat tidak ikut membulat! Solusi: overflow: hidden pada kartu, atau radius langsung pada gambar.

css

/* SALAH: gambar tetap kotak di dalam kartu bulat */
.kartu { border-radius: 16px; }
.kartu img { width: 100%; }

/* BENAR */
.kartu { border-radius: 16px; overflow: hidden; }

Salah: 50% pada persegi panjang. Menghasilkan elips, bukan lingkaran. Lingkaran butuh elemen persegi + 50%.

Salah: radius terlalu besar untuk kartu kecil. Badge kecil dengan radius 16px terlihat aneh; sesuaikan proporsi (badge kecil: 6-8px).

Latihan kilat

Div persegi 100x100px. Bagaimana membuatnya lingkaran sempurna?
Tombol lonjong (padding 12px 32px). Kenapa border-radius: 50% menghasilkan bentuk aneh, dan apa solusinya?
Kartu dengan gambar di atas: gambar harus membulat hanya di dua sudut atas. Tulis CSS-nya.

Kunci: (1) border-radius: 50%;. (2) 50% relatif terhadap lebar DAN tinggi sehingga jadi elips; solusi: border-radius: 999px;. (3) .kartu { border-radius: 16px; overflow: hidden; } atau img { border-radius: 16px 16px 0 0; }.

Istilah kunci

Radius: seberapa bulat sudutnya.
50%: lingkaran sempurna (hanya pada elemen persegi).
999px: trik pil untuk tombol lonjong.
Radius per sudut: urutan dari kiri-atas searah jarum jam.
overflow: hidden: agar isi (gambar) ikut membulat.

Skala radius konsisten

css

:root {
  --radius-sm: 6px;   /* badge, chip kecil */
  --radius-md: 12px;  /* kartu, input */
  --radius-lg: 20px;  /* modal, hero card */
  --radius-full: 999px; /* pil, avatar */
}

Empat level cukup untuk seluruh situs. Konsistensi radius membuat desain terlihat direncanakan, bukan asal.

Rangkuman

border-radius untuk sudut membulat, 50% untuk lingkaran, 999px untuk pil. Ingat pasangannya: radius + overflow: hidden kalau ada konten anak.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Avatar dan Kartu

Di playground:

Hapus overflow: hidden dari .kartu, amati gambar keluar dari sudut membulat. Kembalikan lagi.
Ubah .avatar menjadi bentuk pil horizontal (lonjong) tanpa mengubah HTML: ubah width jadi 120px dan radius yang sesuai.
Buat class .tombol-pil baru: padding 10px 28px, background navy, teks putih, bentuk pil.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox