Border

Border menutup kotak elemen menjadi garis yang terlihat — pembatas kartu, garis bawah menu, dan penanda kutipan semuanya karya property ini. Menulis border tergolong mudah, tetapi ada satu syarat yang membuat banyak garis tidak muncul tanpa penjelasan, serta satu trik kecil yang menyelamatkan layout dari pergeseran saat hover. Keduanya kita bahas di sini, bersama seluruh variasi gaya garis yang tersedia di CSS.

Tiga Sifat: width, style, dan color #

Border tersusun dari tiga property longhand. Berikut bentuk panjangnya:

/* Longhand: tiga property terpisah */
.kartu-laporan {
  border-width: 2px;
  border-style: solid;
  border-color: #1f6f54;
}

Ketiganya biasanya diringkas menjadi satu shorthand dengan urutan nilai width, style, color. Browser sebenarnya menerima urutan apa pun, tetapi menulis konsisten membuat kode mudah dibaca:

.kartu-laporan {
  border: 2px solid #1f6f54;
}

Demo berikut menyandingkan kedua penulisan:

Secara per sisi, longhand berlaku seperti pada padding: border-top, border-right, border-bottom, dan border-left, masing-masing juga memiliki varian -width, -style, dan -color.

style Adalah Syarat Wajib #

.tombol-tanpa-garis {
  border-width: 2px;
  border-color: #1f6f54;
  /* border-style tidak ditulis — garis tidak muncul */
}

Demo berikut memperlihatkan akibatnya: kartu kiri menulis border-width dan border-color tanpa style, kartu kanan menambahkan satu deklarasi border-style:

Bila border tidak muncul, tambahkan satu deklarasi border-style: solid; — atau tulis langsung border: 2px solid #1f6f54; — dan periksa style lebih dulu sebelum mencurigai selector atau cascade.

Pilihan border-style #

Nilai solid, dashed, dan dotted menguasai desain antarmuka sehari-hari. Nilai 3D seperti groove dan outset berasal dari era web awal dan kini jarang dipakai — kenali saja agar tidak asing saat membaca CSS lama.

Sebagai catatan kecil, border-width juga menerima kata kunci thin, medium, dan thick — tebal pastinya ditentukan browser dan jarang terpakai di desain nyata. Satu fakta yang lebih sering berguna: bila border-color tidak ditulis, warna garis mengikuti color teks elemen tersebut (nilai currentColor).

Border untuk Satu Sisi #

Banyak pola desain hanya membutuhkan garis di satu sisi. Shorthand per sisi menerima ketiga nilai sekaligus:

blockquote {
  border-left: 4px solid #1f6f54;
  padding-left: 16px;
  margin-left: 0;
}

h3.sub-bab {
  border-bottom: 2px solid #e0d9c8;
  padding-bottom: 8px;
}

Kedua contoh menunjukkan kombinasi yang terus berulang: border satu sisi hampir selalu berpasangan dengan padding sisi yang sama agar garis tidak menempel ke konten.

Border Transparan Anti-Geser saat Hover #

Menambahkan border hanya saat :hover menggeser isi di sekitarnya, karena border baru membutuhkan ruang tambahan. Solusinya: sisakan border transparan sejak awal, lalu cukup ubah warnanya saat hover:

.tombol-stabil {
  border: 2px solid transparent; /* ruang border sudah dipesan */
}

.tombol-stabil:hover {
  border-color: #1f6f54;
}

Dengan cara ini, ukuran tombol tidak berubah satu piksel pun saat state-nya berganti — yang berganti hanya warna garisnya.

Demo berikut merangkai keduanya: empat gaya garis dari tabel di atas, lalu perbandingan hover yang menambah border dengan hover yang hanya mengganti warna:

Kesalahan Umum #

Ringkasan #

Border tersusun dari border-width, border-style, dan border-color, diringkas menjadi bentuk seperti border: 2px solid #1f6f54 — dan border-style adalah syarat wajibnya, sebab default none membuat garis tidak digambar. Gaya garisnya beragam dari solid hingga outset, sementara pola desain nyata sering hanya butuh garis di satu sisi. Jangan lupakan pula trik border transparan agar hover tidak menggeser layout. Komponen berikutnya mengurus ruang di luar garis ini: margin, lengkap dengan nilai negatif dan kata kunci auto-nya.