Pernah liat foto kondangan yang dibingkai dibanding yang gak dibingkai? Bingkai bikin foto "naik kelas" — kasih batas jelas antara konten utama dan sekitarnya. CSS border itu bingkai digital kamu. Ada 3 hal yang harus dipikirin: tebalnya berapa, gayanya kayak gimana (garis penuh, putus-putus, titik), warnanya apa.

💡 Trap klasik. Kalau cuma nulis border: 2px blue (lupa tipe), border-nya GAK MUNCUL — soalnya default border-style adalah none. Wajib kasih tipe (solid, dashed, dotted) biar visible. Ini bug paling sering dialami pemula CSS.

Shorthand border gabungin 3 sub-properti dalam satu baris:

border: 2px solid blue;
/* sama dengan: */
border-width: 2px;
border-style: solid;
border-color: blue;

Pilihan border-style umum: solid, dashed, dotted, double, groove. Default none (border gak muncul — penyebab "kok border-ku gak kelihatan?").

🎭 Analogi sehari-hari

border = bingkai foto. Tebal (width), gaya (style — solid/dashed/dotted), warna (color). Tanpa style, bingkai tidak muncul (default none).

⚠️ Jebakan yang sering ditemui

• Lupa border-style = border tidak muncul. border: 2px blue saja tidak cukup, harus border: 2px solid blue.
• Border masuk box dimension kalau pakai box-sizing: content-box (default). 100px width + 5px border = 110px total. Pakai border-box untuk include.
• border-collapse: collapse untuk tabel — gabungkan border antar cell.
• outline mirip border tapi tidak makan ruang + tidak respect border-radius. Bagus untuk focus indicator.
• border: none vs border: 0 sama hasilnya tapi 0 lebih ringkas.
• Default browser border button/input beda — selalu reset di app utama.

🎯 border vs outline — pilih yang mana?

• Bagian dari layout (kotak konten, divider) → border (makan ruang, ikut box-sizing, support border-radius)
• Focus indicator (keyboard nav, accessibility) → outline (gak makan ruang, gak ngubah layout)
• Hover/active state dengan animation tanpa shift → outline (atau box-shadow 0 0 0 Xpx warna)
• Visual debug layout → outline: 1px solid red (gak ganggu posisi)

Aturan a11y emas: JANGAN remove outline dari :focus tanpa kasih indicator alternatif. User keyboard butuh tau elemen mana yang fokus.