Borders

Hampir semua antarmuka yang terlihat rapi dibatasi oleh garis tepi: kartu produk dipisahkan dari latar, kolom formulir diberi batas yang jelas, dan bagian artikel dipisahkan garis tipis. Garis tepi tersebut dihasilkan properti border , bagian dari box model yang menggambar garis di sekeliling kotak elemen, tepat di antara padding dan margin. Agar garis muncul, CSS membutuhkan tiga informasi: seberapa tebal, berbentuk apa, dan berwarna apa. Pada Chapter ini kita membedah ketiga komponennya, menelaah berbagai gaya garis, lalu merangkai semuanya dengan shorthand border dan pengaturan per sisi.

Tiga Komponen Border #

Border tersusun atas tiga properti longhand: border-width untuk tebal, border-style untuk bentuk, dan border-color untuk warna. Kita mulai dari bentuk penulisan yang paling mendasar:

.kartu {
  border-width: 4px;
  border-style: solid;
  border-color: rgb(2, 132, 199);
}

Mari kita telaah deklarasi di atas baris demi baris:

1. Baris 2 (border-width: 4px;): menetapkan tebal garis empat piksel di keempat sisi. Nilainya menerima satuan panjang seperti px, em, atau rem; kata kunci thin, medium, dan thick juga sah, tetapi tebal persisnya ditentukan browser.
2. Baris 3 (border-style: solid;): menetapkan bentuk garis. Nilai bawaan properti ini none, sehingga tanpa deklarasi ini dua properti lainnya tidak menghasilkan garis apa pun.
3. Baris 4 (border-color: rgb(2, 132, 199);): memberi warna biru pada garis. Bila properti ini tidak ditulis, border memakai currentColor — warna teks elemen tersebut.

Gaya Garis yang Tersedia #

Properti border-style menyediakan beberapa bentuk garis yang layak dihafal:

Selain keenam nilai tersebut tersedia groove, ridge, inset, dan outset yang tampil seperti ukiran tiga dimensi. Gaya-gaya tersebut jarang dipakai pada desain modern karena hasil akhirnya bergantung pada browser.

Ada satu aturan penting yang sering membuat pemula bingung: border tidak tampil tanpa gaya. Deklarasi berikut menetapkan tebal dan warna, tetapi lupa border-style:

.kartu-tanpa-gaya {
  border-width: 8px;
  border-color: rgb(2, 132, 199);
}

Browser menganggap gayanya masih none, sehingga tidak ada garis yang digambar. Menariknya, nilai computed border-top-width pada kartu tersebut menjadi 0px, bukan 8px — tebal yang dideklarasikan dihitung nol karena tidak ada gaya yang merendernya.

Shorthand dan Pengaturan per Sisi #

Menulis tiga properti untuk setiap elemen terasa panjang. Shorthand border merangkum ketiganya dalam satu deklarasi dengan urutan width style color:

.tombol {
  border: 3px dashed rgb(234, 88, 12);
}

Deklarasi di atas setara dengan menulis border-width: 3px, border-style: dashed, dan border-color: rgb(234, 88, 12) sekaligus. Shorthand ini juga mereset seluruh longhand border lainnya — termasuk border-image — ke nilai awalnya, sehingga praktis dipakai untuk menimpa gaya sebelumnya secara menyeluruh.

Setiap sisi juga dapat dibedakan. CSS menyediakan longhand per sisi — border-top, border-right, border-bottom, dan border-left — beserta longhand yang lebih rinci seperti border-top-width. Perhatikan contoh berikut:

.kartu-per-sisi {
  border-top: 4px solid rgb(14, 165, 233);
  border-right: 2px dashed rgb(239, 68, 68);
  border-bottom: 6px dotted rgb(22, 163, 74);
  border-left: 4px double rgb(168, 85, 247);
}

1. Baris 2 (border-top): sisi atas digambar solid 4px berwarna biru langit.
2. Baris 3 (border-right): sisi kanan digambar dashed 2px berwarna merah.
3. Baris 4 (border-bottom): sisi bawah digambar dotted 6px berwarna hijau.
4. Baris 5 (border-left): sisi kiri digambar double 4px berwarna ungu.

File berikut memuat empat variasi lengkap — termasuk kasus border tanpa gaya — yang dipakai oleh demo di akhir chapter:

<div class="kartu kartu-tepi">Garis atas solid 4px</div>
<div class="kartu kartu-per-sisi">Empat sisi berbeda</div>
<div class="kartu kartu-tanpa-gaya">Deklarasi tanpa gaya — tampil polos</div>
<div class="kartu kartu-shorthand">Shorthand 3px dashed</div>

Hasil di Browser:

Kartu pertama menampilkan garis atas solid 4px berwarna rgb(2, 132, 199).
Kartu kedua berbeda di setiap sisi: atas solid 4px, kanan dashed 2px,
bawah dotted 6px, kiri double 4px. Kartu ketiga menuliskan border-width
8px namun tampil tanpa garis karena tidak punya gaya — computed
border-top-width menjadi 0px. Kartu keempat memakai shorthand
3px dashed rgb(234, 88, 12) yang berlaku ke empat sisi sekaligus.

Demo lengkap chapter ini dapat dibuka langsung di browser. Setiap kartu membawa atribut data-expected yang memeriksa nilai computed melalui harness uji Course ini — termasuk bukti bahwa kartu ketiga benar-benar berujung pada border-top-width: 0px — sehingga klaim di atas dapat diverifikasi secara otomatis.

/* Variasi border — Course CSS (Borders) */

/* Garis hanya di sisi atas */
.kartu-tepi {
  border-top: 4px solid rgb(2, 132, 199);
}

/* Empat sisi dengan lebar, gaya, dan warna berbeda */
.kartu-per-sisi {
  border-top: 4px solid rgb(14, 165, 233);
  border-right: 2px dashed rgb(239, 68, 68);
  border-bottom: 6px dotted rgb(22, 163, 74);
  border-left: 4px double rgb(168, 85, 247);
}

/* Tebal dan warna ada, tetapi tanpa gaya: garis tidak digambar */
.kartu-tanpa-gaya {
  border-width: 8px;
  border-color: rgb(2, 132, 199);
}

/* Shorthand width style color berlaku ke empat sisi */
.kartu-shorthand {
  border: 3px dashed rgb(234, 88, 12);
}