Border dan Outline

Border: bingkai yang makan tempat

Border adalah garis di sekeliling padding elemen. Punya tiga komponen: ketebalan, gaya, dan warna.

.kotak {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

Versi ringkasnya (biasa ditulis tebal-gaya-warna):

.kotak {
  border: 2px solid #333;
}

Gaya yang tersedia: solid, dashed, dotted, double, groove, ridge, none. Bisa juga diatur per sisi: border-top, border-left-width, dan seterusnya.

Penting: border menambah ukuran total elemen kecuali kamu memakai box-sizing: border-box.

Border radius: sudut melengkung

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

.avatar {
  border-radius: 50%; /* lingkaran sempurna (kalau kotaknya persegi) */
}

.tombol-pil {
  border-radius: 999px; /* bentuk pil/kapsul */
}

Bisa beda tiap sudut dengan empat nilai (kiri atas, kanan atas, kanan bawah, kiri bawah):

.kartu-unik {
  border-radius: 16px 4px 16px 4px;
}

Outline: bingkai yang tidak makan tempat

Outline mirip border, tapi digambar di luar border dan tidak menambah ukuran elemen sama sekali. Tidak bisa diatur per sisi dan tidak mengikuti border-radius.

input:focus {
  outline: 2px solid royalblue;
  outline-offset: 2px; /* jarak antara border dan outline */
}

Kegunaan utamanya adalah indikator fokus aksesibilitas: saat pengguna navigasi pakai keyboard (Tab), outline menunjukkan elemen mana yang sedang aktif.

Catatan teknis: jangan pernah menulis outline: none tanpa pengganti visual. Itu membuat pengguna keyboard buta: mereka tidak tahu sedang fokus di mana. Kalau outline default jelek, ganti dengan style yang lebih bagus (misal box-shadow atau outline kustom), jangan dihilangkan begitu saja.

Contoh gabungan

.tombol {
  border: 2px solid #2563eb;
  border-radius: 999px;
  padding: 10px 24px;
}

.tombol:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

:focus-visible hanya menampilkan outline saat fokus berasal dari keyboard, bukan dari klik mouse. Ini pola modern yang rapi.

Rangkuman

Border menambah ukuran elemen dan bisa diatur per sisi plus radius. Outline tidak makan tempat dan peran utamanya adalah aksesibilitas fokus keyboard. Jangan hapus outline tanpa memberi pengganti yang jelas.