Border adalah garis tepi di sekeliling elemen, kayak bingkai foto. Garis itu punya tiga bagian: ketebalan, gaya garis (lurus, putus-putus, titik-titik), dan warna.
🧪 Tebakan cepat:
border: 2px blue;ditulis tanpa gaya garis. Garisnya muncul gak? Tebak dulu, jawabannya ada di bagian "Tanpa gaya garis, border gak muncul".
Garis tepi dalam satu baris
h1 {
border: 3px solid blue;
}
h1adalah selector: aturannya buat semua<h1>.borderadalah properti shorthand, satu properti yang mengisi tiga properti sekaligus. Nilainya tiga, dipisah spasi tanpa koma:3pxadalah ketebalan (border-width). Angka dan satuannya nempel.solidadalah gaya garis (border-style): garis lurus penuh.blueadalah warna (border-color).
- Titik koma di akhir menutup deklarasinya.
Hasilnya, judul dibingkai garis biru setebal 3 piksel di keempat sisinya. Urutan yang lazim: tebal, gaya, warna. Hasilnya sama dengan tiga deklarasi terpisah:
h1 {
border-width: 3px;
border-style: solid;
border-color: blue;
}
Dua cara ini sama-sama sah. Kalau aturan h1 { ... } sudah ada, tambahkan deklarasinya di dalam kurung kurawal yang sama. Warnanya gak disebut? Garisnya ikut warna teks.
Tanpa gaya garis, border gak muncul
Nilai bawaan border-style adalah none, artinya gak ada garis. Jadi border-width dan border-color saja gak menggambar apa-apa: tebal dan warnanya sudah ada, tapi bentuk garisnya belum. Jawaban tebakan: gak muncul. Tambahkan gaya garis, misalnya solid, dan garisnya langsung kelihatan.
Pilihan border-style: solid (lurus), dashed (putus-putus), dotted (titik-titik), double (dua garis), juga groove, ridge, inset, outset, dan none.
⚠️ Jebakan yang sering ketemu
- Koma di antara nilai.
border: 1px, solid, black;diabaikan. Pisahkan dengan spasi. - Angka tanpa satuan.
border: 1 solid black;diabaikan. Tulis1px. - Nama gaya dikarang.
dashdandotgak dikenal. Tulisdasheddandotted. - Border menambah ukuran kotak. Kotak
width: 200pxdenganborder: 10px solidjadi selebar 220px, karena garisnya ditambahkan di luar lebar itu (kecuali kamu memakaibox-sizing: border-box).
TL;DR: border: 3px solid blue; memberi garis tepi: tebal, gaya, warna, dipisah spasi. Sama dengan border-width, border-style, dan border-color yang ditulis terpisah. Gaya garis harus ada, karena bawaannya none dan tanpa itu gak ada garis yang digambar. Gaya yang umum: solid, dashed, dotted, double.
