Border adalah garis di sekeliling atau di satu sisi sebuah elemen, dan divider adalah garis tipis yang memisahkan dua elemen yang berurutan. Keduanya alat pemisah, sama seperti ruang kosong (spacing). Bayangin buku tulis bergaris. Garis biru mudanya membantu tulisanmu tetap lurus, tapi kamu hampir gak sadar garisnya ada. Kalau garisnya hitam tebal, halamannya terasa seperti kandang, dan mata tersangkut di garis, bukan di tulisan. Garis yang baik bekerja diam-diam.
🧪 Tebakan cepat: Dasbor Bu Sri menampilkan 16 pesanan di area setinggi 664px. Tiap baris 37px: padding 8px atas bawah, teks 20px, garis 1px. Kamu ikut prinsip "spacing dulu": garisnya dibuang, dan padding dinaikkan jadi 14px supaya ruangnya cukup memisahkan, jadi baris 48px. Ke-16 pesanan masih kelihatan tanpa scroll? Jawabannya ada di bagian "Kapan garis 1px membantu".
Tiga cara memisahkan
| Cara | CSS | Cocok untuk |
|---|---|---|
| Ruang (spacing) | padding, margin, gap |
sedikit item yang isinya beda-beda, antar bagian halaman |
| Divider | border-bottom: 1px solid #e2e8f0 di antara item |
daftar panjang dan padat, baris tabel |
| Border keliling atau latar beda | border di 4 sisi, atau background lain |
kartu, kolom input, kotak yang bisa diklik |
Spacing dulu, garis belakangan
Prinsip utamanya: spacing dulu, border terakhir. Coba pisahkan dengan ruang kosong dulu. Kalau masih belum jelas, baru tambahkan garis, dan pilih garis yang paling samar yang masih kelihatan.
Daftar kamar Bu Sri di HP cuma tiga item. Tiap item punya nama dan harga yang menempel (4px), dan jarak antar item 32px. Ruangnya sendiri sudah mengelompokkan, jadi garis gak wajib:
<div class="list-item"><b>Kamar Teras</b><span>Rp 350.000 / malam · 2 tamu</span></div>
<div class="list-item"><b>Kamar Loteng</b><span>Rp 275.000 / malam · 2 tamu</span></div>
<div class="list-item"><b>Kamar Kebun</b><span>Rp 425.000 / malam · 4 tamu</span></div>
<style>
.list-item { padding: 16px 0; } /* 16 + 16 = 32px antar kamar */
.list-item b { display: block; margin-bottom: 4px; }
</style>
padding: 16px 0artinya 16px atas dan bawah, 0 kiri dan kanan. Dua item yang berdekatan jadi berjarak 16 + 16 = 32px.- Nama ke harga cuma 4px. Jarak di dalam kelompok jauh lebih kecil dari jarak antar kelompok, jadi mata membaca tiga kamar.
Kapan garis 1px membantu
Garis membantu saat ruang mahal atau gak cukup:
- Daftar panjang dan padat. Dasbor Bu Sri dengan 16 baris, inbox, riwayat transaksi.
- Baris yang lebar. Nama tamu di kiri dan total di kanan: garis menuntun mata menyeberang baris yang sama.
- Tabel. Baris dan kolom yang harus dibaca lurus.
Hitung dasbornya. Baris terlihat = tinggi area ÷ tinggi baris, dibulatkan ke bawah:
| Pemisah | Tinggi baris | Baris terlihat di 664px |
|---|---|---|
| Garis 1px, padding 8px | 8 + 20 + 8 + 1 = 37px | 664 ÷ 37 = 17,9 → 17 |
| Ruang saja, padding 14px | 14 + 20 + 14 = 48px | 664 ÷ 48 = 13,8 → 13 |
Jadi jawaban tebakannya: gak. Cuma 13 pesanan yang kelihatan, 3 sisanya harus di-scroll. Dengan garis 1px, 17 baris muat dan ke-16 pesanan kelihatan sekaligus. Di daftar yang padat, garis 1px lebih murah daripada ruang. Itu jawaban tebakannya.
Warna garis: abu muda, bukan hitam
Garis pemisah gak perlu kontras tinggi. Ini kontras beberapa warna garis terhadap latar putih:
| Garis | Kontras | Kesan |
|---|---|---|
#000000 |
21:1 | keras, garisnya lebih menonjol dari isinya |
#D1D5DB |
1,47:1 | jelas, untuk tabel yang padat |
#E5E7EB |
1,24:1 | halus, pilihan umum untuk border subtle di light mode |
#F3F4F6 |
1,10:1 | paling samar, saat ruangnya sudah memisahkan |
Halaman Bu Sri memakai #e2e8f0 (1,23:1), hampir sama dengan #E5E7EB. Di mode gelap, garisnya #374151 di atas kartu #1f2937 (1,42:1).
Divider dan garis kartu adalah dekorasi, jadi gak wajib 3:1. Lain halnya dengan batas kolom input: kalau garis itu satu-satunya tanda di mana kolom input berada, WCAG 1.4.11 meminta minimal 3:1. Garis #E5E7EB di kolom tanggal check-in gagal; pakai #475569 (7,58:1), seperti tombol malam.
Divider tanpa garis di ujung
.list-item { padding: 16px 0; border-bottom: 1px solid #F3F4F6; }
.list-item:last-child { border-bottom: none; } /* gak ada garis di bawah item terakhir */
border-bottomdi tiap item bikin garis di bawah item terakhir juga, padahal di bawahnya sudah gak ada apa-apa untuk dipisahkan.:last-childmembuangnya.- Cara lain:
.list-item + .list-item { border-top: 1px solid #F3F4F6; }. Garis cuma muncul di antara dua item. - Divider inset dimulai setelah gambar kecil di kiri (misalnya
margin-left: 72px), jadi garisnya gak memotong kolom gambar.
⚠️ Jebakan yang sering ketemu
- Garis hitam tebal.
2px solid #000(21:1) di tiap item membuat daftarnya terasa seperti tabel pajak. Pakai 1px abu muda. - Garis dan ruang yang sama-sama besar. Kalau sudah ada 32px di antara item, garis jarang menambah informasi.
- Garis input yang terlalu samar. Batas kolom input butuh 3:1 (
#475569), bukan#E5E7EB. - Garis ganda.
border-bottomdi item terakhir menempel ke garis kartu di bawahnya. Buang dengan:last-child.
TL;DR: Ada tiga cara memisahkan: ruang, divider, dan border keliling atau latar beda. Prinsip utamanya spacing dulu, border terakhir: daftar tiga kamar cukup dengan padding: 16px 0 (32px antar kamar, 4px nama ke harga). Garis 1px membantu di daftar panjang dan padat, baris yang lebar, dan tabel: dasbor 16 pesanan muat dengan baris 37px bergaris, tapi cuma 13 yang kelihatan kalau baris dibesarkan jadi 48px tanpa garis. Warna garis abu muda, bukan hitam: #E5E7EB (1,24:1) untuk border subtle di light mode, #F3F4F6 (1,10:1) yang paling samar, #374151 di mode gelap. Divider adalah dekorasi; batas kolom input butuh 3:1. Buang garis di item terakhir dengan :last-child.
