Border Style, Width, dan Color

Chapter Border pada section Box Model sudah mengajarkan anatomi border: tiga property longhand, syarat wajib border-style, dan penulisan per sisi. Chapter ini melanjutkan dari titik itu dengan fokus yang berbeda — sisi visualnya. Kita menyusun galeri kombinasi style dan warna, memanfaatkan currentColor dan transparent, membuat border dua warna, membedakan dashed dan dotted, lalu merangkai pola aksen kiri yang populer untuk kutipan.

Galeri Style dan Kombinasi Warna #

Empat style yang paling sering tampil di antarmuka nyata:

Style	Kesan yang dihasilkan
`solid`	tegas dan netral; pilihan paling serbaguna
`dashed`	sementara, draft, atau area yang boleh dilepas
`dotted`	lembut dan ramah
`double`	klasik dan meriah; butuh width minimal 3px

Soal warna, dua kebiasaan desain terbukti aman. Pertama, pilih warna border yang lebih terang daripada warna teks di dalamnya, sehingga garis tidak berebut perhatian dengan konten. Kedua, ambil warna border dari keluarga warna yang sama dengan aksen elemen:

css
.kartu-tenang { border: 1px solid #d9d2c0; }

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

.kupon { border: 2px dashed #2b6cb0; }

Ketiganya dipasang pada kartu sungguhan:

Warna Ikut Teks dengan currentColor #

Bila border-color tidak ditulis, border memakai nilai currentColor — warna teks elemen itu sendiri. Menuliskannya secara eksplisit membuka pola yang rapi: ubah color, maka teks dan border berganti bersamaan:

css
.tombol-kerangka {
  color: #1f6f54;
  border: 2px solid currentColor;
}

.tombol-kerangka:hover {
  color: #14503a;
}

Pasangannya adalah transparent: border transparan tetap memakan ruang (rekap trik anti-geser pada chapter Border), dan berguna pula sebagai wadah warna yang akan diisi saat state berubah.

Border Dua Warna #

Longhand per sisi memungkinkan satu border memakai dua warna — misalnya terang di atas dan pekat di bawah:

css
.chip-timbul {
  border: 2px solid #1f6f54;
  border-top-color: #7cc795;
  border-bottom-color: #14503a;
}

Chip dengan border dua warna:

Pola serupa dipakai pada menu tab, dengan garis atas sebagai penanda tab yang sedang aktif.

dashed vs dotted di Mata Browser #

Keduanya menggambar pola putus, tetapi bentuk dan siklusnya berbeda:

Aspek	`dashed`	`dotted`
Bentuk potongan	strip persegi panjang	titik-titik membulat
Panjang strip dan jaraknya	ditentukan browser, tidak dapat diatur	ditentukan browser
Perilaku di sudut	strip terpotong menyesuaikan tiap sisi	titik mengikuti kelengkungan `border-radius` dengan rapi

Karena skala polanya sepenuhnya milik browser, dua browser bisa menampilkan dashed dengan strip yang berbeda panjang. Bila polanya harus presisi — panjang dan jarak tertentu — bentuklah sendiri dengan repeating-linear-gradient() dari chapter Linear Gradient, atau gunakan gambar.

Pola Aksen Kiri untuk Kutipan #

Garis di satu sisi yang dipadukan warna aksen menghasilkan penanda blok paling populer di web:

css
.kutipan-aksen {
  border-left: 4px solid #f4b942;
  padding-left: 16px;
  font-style: italic;
}

Warna aksen bebas dipilih sesuai kategori pesan — kuning untuk catatan, hijau untuk panduan, merah untuk peringatan.

Pola lengkapnya pada kutipan dan badge status:

Sekilas border-image #

Satu property yang jarang terpakai: border-image dapat mengganti garis border dengan gambar atau gradien, misalnya border-image: linear-gradient(#1f6f54, #f4b942) 1; — angka 1 di akhir adalah nilai slice yang wajib ada. Karena perilakunya bertingkat dan jarang dibutuhkan, cukup kenali namanya; hampir semua kebutuhan garis dapat diselesaikan dengan kombinasi width, style, dan color.

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikannya
Warna border sama pekatnya dengan teks	Garis berebut perhatian dengan konten	Pilih border yang lebih terang atau lebih redup daripada teks
Berharap bisa mengatur panjang strip `dashed`	Skala pola sepenuhnya milik browser	Bangun pola sendiri dengan `repeating-linear-gradient()`
Memakai `border-image` tanpa nilai slice	Border image tidak tampil	Sertakan angka slice, misalnya `... 1;` di akhir nilai

Ringkasan #

Border kini kita olah sampai lapisan presentasinya: kombinasi style dan warna menentukan kesan, currentColor menyatukan warna teks dengan garis, longhand per sisi membuka kemungkinan border dua warna, dan perbedaan dashed/dotted menentukan kapan kita perlu membangun pola sendiri. Pola aksen kiri menjadi resep siap pakai untuk kutipan dan catatan. Setelah garis dekoratif selesai dibahas, kita berkenalan dengan garis fungsional yang tidak memakan ruang: outline.