Border dan gaya garisnya

Delapan gaya garis, tebal, warna, dan bentuk ringkasnya.

Pahami konsepnya

Border menggambar garis tepi elemen dan punya tiga dimensi yang saling bebas: gaya, tebal, dan warna. Gaya ditentukan border-style dan tersedia delapan pilihan — solid (garis penuh), dashed (putus-putus), dotted (titik-titik), double (garis ganda), serta groove, ridge, inset, outset yang memberi kesan timbul-tenggelam tiga dimensi. Tanpa border-style, border tidak muncul sama sekali.

Dimensi lainnya: border-width mengatur ketebalan dalam piksel dan border-color mewarnainya (nama, #hex, atau rgb). Ketiganya bisa dirangkum satu deklarasi: border: 2px dashed tomato — urutannya bebas asal lengkap.

Setiap sisi bisa diatur sendiri: border-top, border-right, border-bottom, border-left — masing-masing dengan varian -width/-style/-color bila perlu mengubah satu hal saja. Pola favorit tampilan modern: hanya border-bottom pada kartu (garis aksen di bawah judul), atau border-radius — tetangga border — yang membulatkan sudut sampai menjadi pil penuh saat nilainya setengah tinggi elemen.

Coba contoh kode

.garis-satu   { border: 1px solid blue; }
.garis-dua    { border: 10px dotted green; }
.garis-tiga   { border: 3px dashed #ff6b35; }
.garis-empat  { border: 6px double purple; }

.kartu-aksen {
  border-bottom: 4px solid teal;
  border-radius: 8px;
}

Empat kelas pertama memamerkan gaya inti dengan tebal berbeda — perhatikan dotted dan dashed makin terlihat polanya pada tebal besar. .kartu-aksen memakai pola sehari-hari: garis bawah tebal sebagai aksen plus sudut membulat, tanpa bingkai penuh.

Latihan singkat

Buat lima kartu dengan lima gaya border berbeda, lalu satu kartu bergaya modern: tanpa bingkai penuh, hanya aksen bawah dan sudut membulat.