Border dan Border Radius

Kartu profil pada Chapter sebelumnya tampil tanpa penanda batas yang jelas, sehingga batasnya hanya bisa ditebak dari perbedaan warna latar. Properti border menggambar garis tepi pada lapis ketiga box model, sementara border-radius membulatkan sudut-sudut garis tersebut. Kombinasi keduanya menghasilkan komponen yang sangat umum di web: kartu dengan sudut lembut, garis pemisah, tombol, hingga foto profil berbentuk lingkaran. Pada Chapter ini kita mengatur ketebalan, gaya, dan warna border, lalu membulatkan sudut elemen dengan berbagai nilai border-radius.

Menggambar Border: Width, Style, dan Color #

Border tersusun dari tiga informasi: ketebalan (width), bentuk garis (style), dan warna (color). Ketiganya punya properti terpisah — border-width, border-style, dan border-color — dan dirangkum oleh shorthand border. Urutan nilai pada shorthand boleh ditukar, tetapi kebiasaan umum menuliskannya sebagai width, style, lalu color:

.kartu {
  border: 2px solid #2563eb;         /* shorthand: width, style, color */
}
.kartu-tebal {
  border-width: 4px;                  /* ketebalan garis */
  border-style: dashed;               /* bentuk garis */
  border-color: #94a3b8;              /* warna garis */
}

Nilai border-style menentukan wujud garis, dan pilihan yang paling sering dipakai adalah:

Border pada Satu Sisi #

Tidak semua garis tepi harus mengelilingi elemen secara utuh. CSS menyediakan shorthand per sisi: border-top, border-right, border-bottom, dan border-left. Pola pemakaian yang umum adalah garis bawah sebagai penanda — misalnya di bawah judul section atau di bawah tab yang sedang aktif:

.judul-section {
  border-bottom: 3px solid #2563eb;
  padding-bottom: 8px;
}

Elemen di atas menerima garis biru setebal 3px hanya pada sisi bawah, dan padding-bottom menjaga jarak antara teks dengan garis tersebut. Properti sisi lain seperti border-left bekerja dengan pola yang sama, cukup diganti sesuai sisi yang diinginkan.

Border Radius: Membulatkan Sudut #

Properti border-radius membulatkan sudut kotak, tanpa memengaruhi isi atau jarak elemen lain. Satu nilai berlaku untuk keempat sudut, dan empat nilai mengikuti urutan sudut yang sama dengan shorthand margin: kiri-atas, kanan-atas, kanan-bawah, kiri-bawah.

.kartu {
  border-radius: 12px;      /* keempat sudut membulat 12px */
}
.tombol {
  border-radius: 999px;     /* ujung membulat penuh (bentuk pill) */
}
.avatar {
  border-radius: 50%;       /* sudut membulat setengah lebar elemen */
}

Nilai persentase dihitung terhadap lebar dan tinggi sisi terkait. Pada elemen persegi — lebar dan tingginya sama — border-radius: 50% membulatkan setiap sudut hingga setengah lebar, dan hasil akhirnya adalah lingkaran penuh. Nilai besar seperti 999px pada tombol menghasilkan bentuk pill karena sisi pendek elemen menjadi pembatas sebenarnya; nilai yang melebihi kebutuhan otomatis disesuaikan browser.

Outline vs Border #

Berbeda dari border, properti outline menggambar garis di sekeliling elemen tanpa menempati ruang layout, dan secara bawaan dipakai browser sebagai penanda fokus saat pengunjung berpindah elemen dengan keyboard — karena itu outline sebaiknya tidak dihapus begitu saja.

Contoh Lengkap: Kartu dengan Avatar Bulat #

Contoh berikut merangkai Chapter ini: kartu bersudut membulat berisi foto profil berbentuk lingkaran. Gambar avatar-budi.svg tersedia di bundle sebagai gambar persegi; bentuk lingkaran lahir murni dari CSS. Simpan ketiga file dalam satu folder, lalu buka file HTML:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu dengan Avatar</title>
  <link rel="stylesheet" href="gaya-border.css">
</head>
<body>
  <article class="kartu">
    <img src="avatar-budi.svg" alt="Avatar Budi Santoso" class="avatar">
    <h2>Budi Santoso</h2>
    <p>Penulis konten yang menekuni HTML dan CSS.</p>
  </article>
</body>
</html>

body {
  font-family: sans-serif;
  background-color: #e2e8f0;
}

.kartu {
  background-color: #ffffff;
  padding: 24px;
  margin: 40px;
  border: 1px solid #94a3b8;
  border-radius: 12px;
}

.avatar {
  border: 3px solid #2563eb;
  border-radius: 50%;
}

h2 {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Satu kartu putih bersudut membulat di atas latar abu-abu muda
  - Foto profil Budi berbentuk lingkaran dengan garis biru setebal 3px
  - Nama "Budi Santoso" dengan garis abu-abu tipis di bawahnya

Mari kita telaah aturan yang membentuk tampilan tersebut:

1. .kartu dengan border: 1px solid #94a3b8: garis tipis abu-abu mengelilingi seluruh kartu, melengkapi padding dan margin dari Chapter sebelumnya.
2. .kartu dengan border-radius: 12px: keempat sudut kartu membulat; border ikut mengikuti lengkungan sudut tersebut.
3. .avatar dengan border-radius: 50%: gambar persegi berubah menjadi lingkaran karena setiap sudut membulat setengah lebar elemen.
4. .avatar dengan border: 3px solid #2563eb: garis biru berdiri tepat di tepi lingkaran, memberi kesan bingkai pada foto.
5. h2 dengan border-bottom: garis pemisah hanya pada sisi bawah nama, dipadukan padding-bottom agar teks tidak menempel garis.
6. <img> dengan alt dan class: struktur HTML tetap sederhana; seluruh bentuk lingkaran ditangani CSS, bukan oleh gambar itu sendiri.

Dengan jarak dari Chapter sebelumnya dan garis tepi dari Chapter ini, kotak kita telah terasa seperti komponen. Masalah berikutnya adalah ukuran: bagaimana mengatur lebar dan tinggi elemen agar kartu dan gambarnya tidak melar ataupun menyusut sembarangan.

Referensi resmi untuk pendalaman:

• MDN Web Docs — border
• MDN Web Docs — border-radius
• MDN Web Docs — outline

body {
  font-family: sans-serif;
  background-color: #e2e8f0;
}

.kartu {
  background-color: #ffffff;
  padding: 24px;
  margin: 40px;
  border: 1px solid #94a3b8;
  border-radius: 12px;
}

.avatar {
  border: 3px solid #2563eb;
  border-radius: 50%;
}

h2 {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu dengan Avatar</title>
  <link rel="stylesheet" href="gaya-border.css">
</head>
<body>
  <article class="kartu">
    <img src="avatar-budi.svg" alt="Avatar Budi Santoso" class="avatar">
    <h2>Budi Santoso</h2>
    <p>Penulis konten yang menekuni HTML dan CSS.</p>
  </article>
</body>
</html>