Border

Tiga komponen border

Border selalu butuh tiga hal: lebar, gaya, dan warna. Kalau gayanya tidak ditulis, border tidak muncul sama sekali (default none).

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

Shorthand

.kotak {
  border: 2px solid #38bdf8; /* lebar | gaya | warna */
}

Gaya yang tersedia: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden. Untuk desain modern, solid dipakai 95% waktu.

Border per sisi

.kartu {
  border-top: 3px solid navy;    /* hanya atas */
  border-bottom: 1px dashed #ccc;
  border-left: none;             /* hapus sisi kiri */
}

Properti longhand seperti border-top-width juga ada kalau butuh kontrol super detail.

Catatan teknis: border ikut dihitung dalam box model. Dengan box-sizing: border-box, border 2px "memakan" 2px dari width yang ditentukan. Tanpa itu, border menambah ukuran total elemen.

Analogi: bingkai foto

Border adalah bingkai foto: garis di sekeliling konten. Seperti bingkai asli, ia punya ketebalan (lebar), gaya (ukiran), dan warna. Dan seperti bingkai, ia menambah ukuran total paket kecuali kamu memakai border-box.

Kenapa border shorthand berurutan begitu?

border: 2px solid red selalu pola lebar-gaya-warna karena itu urutan yang paling jarang ambigu. Kamu boleh mengacaknya (border: solid 2px red valid), tapi konsisten itu lebih penting: tim yang semua menulis urutan sama membaca kode 2x lebih cepat.

Contoh bertahap: dari garis ke desain

Level 1, garis sederhana:

.kotak {
  border: 1px solid #e2e8f0;
}

Level 2, hanya sisi tertentu untuk efek desain:

/* Garis kiri sebagai aksen (pola blockquote/callout) */
.catatan {
  border-left: 4px solid #38bdf8;
  padding-left: 16px;
  background: #f0f9ff;
}

/* Garis bawah untuk input modern */
input.modern {
  border: none;
  border-bottom: 2px solid #cbd5e1;
}

input.modern:focus {
  outline: none;
  border-bottom-color: #38bdf8;
}

Level 3, segitiga CSS murni (trik klasik memakai border):

.segitiga {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #38bdf8;
}

Border yang bertemu di sudut membentuk diagonal; dengan width/height 0, yang tersisa hanya segitiga. Trik ini dipakai untuk tooltip arrow dan dropdown caret.

Kesalahan umum pemula

Salah: border menambah ukuran tanpa sadar. .kotak { width: 100px; border: 5px solid; } totalnya 110px dengan content-box. Solusi: border-box global (lihat modul box-model).

Salah: border vs outline tertukar. Butuh garis yang tidak menggeser layout (misal indikator fokus)? Pakai outline. Butuh garis sebagai bagian desain permanen? Border.

Salah: gaya border default. border: 2px red tanpa gaya = tidak tampil! Gaya (solid/dashed/dotted) WAJIB ada karena defaultnya none.

Latihan kilat

1. Tulis border: 3px, putus-putus (dashed), warna merah, dalam satu baris.
2. Buat efek "callout": hanya garis kiri 4px biru + padding kiri 16px + background biru muda.
3. Kenapa border: 2px red; tidak menampilkan apa-apa? Perbaiki.

Kunci: (1) border: 3px dashed red;. (2) border-left: 4px solid #38bdf8; padding-left: 16px; background: #f0f9ff;. (3) Gaya (style) wajib ada karena defaultnya none; perbaiki: border: 2px solid red;.

Istilah kunci

• Border-width: ketebalan garis.
• Border-style: gaya garis (solid, dashed, dotted); WAJIB ada.
• Border-color: warna garis.
• Shorthand: border: lebar gaya warna;.
• Border per sisi: border-top/right/bottom/left untuk satu sisi saja.

Border sebagai pembatas section

.section + .section {
  border-top: 1px solid #e2e8f0;
}

Satu baris ini memberi pemisah halus antar section tanpa HR tambahan atau class khusus. Pola minimalis yang dipakai banyak blog dan dokumentasi.

Border vs outline: pilih yang mana?

Butuh garis yang memengaruhi layout (kotak ikut membesar)? Pakai border. Butuh indikator visual yang tidak menggeser apa pun (fokus keyboard, highlight sementara)? Pakai outline. Keduanya terlihat mirip, tapi border "nyata" di layout sedangkan outline hanya "cat" di atasnya.

Rangkuman

Border = width + style + color. Pakai shorthand border: 2px solid warna untuk kasus umum, dan properti per sisi untuk aksen seperti garis atas kartu.