Abd. Asis

Di akhir bab sebelumnya kita menguasai background — kanvas tempat konten berdiri. Tapi elemen tidak hidup sendiri. Di halaman nyata, elemen-elemen berjejer, bertumpuk, dan saling berdekatan. Di situlah border masuk: garis tepi yang memisahkan satu elemen dari yang lain, memberi batas visual yang tegas tanpa harus menggeser atau menambah margin.

Border bukan sekadar garis lurus. CSS memberi kamu kontrol penuh atas tampilannya — ketebalan, warna, gaya garis, bahkan sudut yang membulat. Properti-properti ini bekerja secara berlapis, dan memahami urutan cara kerjanya akan menghindarkan kamu dari kebingungan yang sering dialami pemula.

Border-Style: Fondasi yang Wajib Ada

Satu aturan yang berlaku keras: tidak ada properti border lain yang bekerja tanpa border-style. Berapapun kamu mengatur ketebalan atau warna, border tidak akan muncul jika stylenya belum ditetapkan.

border-style menerima sepuluh nilai yang masing-masing menghasilkan tampilan berbeda:

/* profil.css */

.contoh-dotted  { border-style: dotted; }   /* titik-titik */
.contoh-dashed  { border-style: dashed; }   /* garis putus-putus */
.contoh-solid   { border-style: solid; }    /* garis penuh */
.contoh-double  { border-style: double; }   /* dua garis sejajar */
.contoh-groove  { border-style: groove; }   /* efek 3D terpahat */
.contoh-ridge   { border-style: ridge; }    /* efek 3D menonjol */
.contoh-inset   { border-style: inset; }    /* efek tertekan ke dalam */
.contoh-outset  { border-style: outset; }   /* efek terdorong ke luar */
.contoh-none    { border-style: none; }     /* tidak ada border */
.contoh-hidden  { border-style: hidden; }   /* tersembunyi */

Dalam praktiknya, solid adalah pilihan yang paling sering digunakan. Nilai dotted dan dashed berguna untuk elemen yang ingin terasa lebih ringan secara visual, misalnya divider atau border pada field yang sedang dalam mode "draft". Nilai 3D seperti groove dan ridge terasa kuno di desain modern, tapi masih relevan untuk antarmuka tertentu yang menginginkan estetika "raised button".

Nilai none dan hidden sama-sama menghilangkan border, tapi ada perbedaan kecil: hidden digunakan dalam konteks tabel untuk mengesampingkan border yang diwarisi dari aturan tabel. Untuk elemen biasa, none sudah cukup.

Border-Width: Mengatur Ketebalan

Setelah style ditetapkan, border-width mengontrol seberapa tebal garis tersebut. Nilainya bisa berupa kata kunci atau satuan CSS apapun.

/* profil.css */

.border-tipis   { border-style: solid; border-width: thin; }
.border-sedang  { border-style: solid; border-width: medium; }
.border-tebal   { border-style: solid; border-width: thick; }

/* atau dengan nilai eksplisit */
.kartu-profil {
  border-style: solid;
  border-width: 2px;
}

.panel-peringatan {
  border-style: dashed;
  border-width: 3px;
}

Kata kunci thin, medium, dan thick masing-masing setara dengan sekitar 1px, 3px, dan 5px — tapi nilainya tidak dijamin konsisten di semua browser. Untuk kontrol yang tepat dan konsisten, gunakan nilai numerik.

Ketebalan Berbeda Per Sisi

Sama seperti margin dan padding, border-width menerima 1 hingga 4 nilai dengan pola yang identik: satu nilai berlaku ke semua sisi, dua nilai berlaku ke pasangan atas-bawah dan kiri-kanan, dan seterusnya searah jarum jam.

/* profil.css */

.kartu-artikel {
  border-style: solid;
  /* top: 1px, right: 3px, bottom: 1px, left: 3px */
  border-width: 1px 3px;
}

.blok-kutipan-penting {
  border-style: solid;
  /* top: 0, right: 0, bottom: 0, left: 4px — garis kiri tebal saja */
  border-width: 0 0 0 4px;
}

Pola 0 0 0 4px — menghapus tiga sisi dan menyisakan hanya sisi kiri — adalah teknik klasik untuk membuat block quote atau keterangan yang diberi aksen vertikal di sebelah kiri.

Border-Color: Mewarnai Garis

border-color menerima semua format warna yang sudah kita kenal dari Bab 8: nama warna, HEX, RGB, HSL, dan bahkan nilai transparent.

/* profil.css */

.panel-sukses {
  border-style: solid;
  border-width: 2px;
  border-color: #16a34a;  /* hijau */
}

.panel-peringatan {
  border-style: solid;
  border-width: 2px;
  border-color: hsl(38, 92%, 50%);  /* oranye */
}

.panel-error {
  border-style: solid;
  border-width: 2px;
  border-color: rgb(220, 38, 38);   /* merah */
}

Jika border-color tidak ditulis sama sekali, browser akan menggunakan nilai color elemen tersebut sebagai warna border. Ini artinya jika kamu menulis color: #1e3a5f untuk teks, border juga akan berwarna #1e3a5f secara otomatis — berguna untuk menjaga konsistensi tanpa harus mengulang nilai warna.

Nilai transparent juga memiliki kegunaan tersendiri: border tetap menempati ruang (mempertahankan layout), tapi tidak terlihat. Ini berguna untuk transisi dan efek hover — border transparan yang tiba-tiba berubah berwarna saat di-hover menciptakan pergeseran yang halus tanpa menggeser layout di sekitarnya.

Warna Berbeda Per Sisi

Seperti border-width, properti ini juga menerima hingga 4 nilai untuk mengatur warna tiap sisi secara independen.

/* profil.css */

.label-dekoratif {
  border-style: solid;
  border-width: 2px;
  /* top: biru, right: transparan, bottom: biru, left: transparan */
  border-color: #3b82f6 transparent #3b82f6 transparent;
}

Border Per Sisi

Selain menggunakan shorthand multi-nilai, CSS juga menyediakan properti khusus untuk setiap sisi. Ini berguna ketika kamu hanya perlu mengubah satu sisi tanpa menyentuh yang lain.

/* profil.css */

/* properti style per sisi */
.elemen-spesial {
  border-top-style: solid;
  border-right-style: none;
  border-bottom-style: dashed;
  border-left-style: none;
}

/* properti width per sisi */
.kartu-unggulan {
  border-style: solid;
  border-top-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

/* properti color per sisi */
.panel-aksen {
  border-style: solid;
  border-width: 2px;
  border-top-color: #3b82f6;
  border-right-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
  border-left-color: #e2e8f0;
}

Contoh .panel-aksen di atas adalah pola yang sering muncul di desain modern: border abu-abu tipis di tiga sisi, dengan satu sisi (biasanya atas) diberi warna aksen yang lebih kuat. Ini menciptakan kesan bahwa elemen "dikategorikan" berdasarkan warnanya tanpa perlu lebar border yang terlalu tebal.

Shorthand Border

Ketiga properti — border-width, border-style, dan border-color — bisa digabungkan dalam satu baris menggunakan shorthand border. Urutannya bebas, tapi border-style adalah satu-satunya yang wajib ditulis.

/* profil.css */

/* width style color */
.kartu-profil {
  border: 2px solid #e2e8f0;
}

.tombol-aksi {
  border: 1px dashed #3b82f6;
}

/* hanya style — width dan color menggunakan default */
.pemisah-halus {
  border: solid;
}

Shorthand border berlaku untuk semua empat sisi sekaligus. Jika kamu hanya ingin menerapkan border di satu sisi, gunakan shorthand per-sisi:

/* profil.css */

/* border kiri saja — teknik block quote */
.kutipan-penting {
  border-left: 4px solid #3b82f6;
  padding-left: 16px;
  color: #475569;
}

/* border bawah saja — teknik underline */
.judul-section {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

/* border atas saja — separator sebelum footer */
.area-footer {
  border-top: 1px solid #e2e8f0;
  padding-top: 24px;
}

Tiga pola di atas — border kiri untuk kutipan, border bawah untuk heading, border atas untuk pemisah — adalah pola yang akan sering kamu temui di hampir semua proyek. Hafalkan kombinasinya karena ketiganya sangat berguna.

Ketika hanya satu sisi yang dibutuhkan, selalu gunakan shorthand per-sisi (border-left, border-bottom, dst.) daripada menulis keempat properti terpisah. Selain lebih ringkas, ini juga menghindari penimpaan border di sisi lain yang mungkin sudah diatur oleh aturan CSS lain.

Border-Radius: Sudut yang Membulat

Properti border-radius mengubah sudut kotak elemen menjadi membulat. Nilainya menentukan jari-jari lengkungan — semakin besar nilainya, semakin membulat sudutnya.

/* profil.css */

/* sudut sedikit membulat — tampilan "modern" */
.kartu-proyek {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* sangat membulat — tampilan "pill" */
.lencana-status {
  border: 1px solid #16a34a;
  background-color: #dcfce7;
  border-radius: 9999px;  /* nilai besar = selalu pill */
  padding: 4px 12px;
}

/* lingkaran sempurna — untuk avatar atau ikon */
.foto-profil {
  border: 3px solid #3b82f6;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

Nilai 50% menghasilkan lingkaran sempurna ketika elemen memiliki lebar dan tinggi yang sama. Nilai 9999px adalah trik populer untuk membuat pill shape — karena jari-jari yang sangat besar pada elemen persegi panjang akan menghasilkan ujung setengah lingkaran di kedua sisi.

Radius Per Sudut

border-radius bisa menerima hingga 4 nilai, tapi urutannya berbeda dari border-width dan border-color. Alih-alih searah jarum jam dari atas, urutannya dimulai dari sudut kiri atas:

border-radius: top-left  top-right  bottom-right  bottom-left

/* profil.css */

/* sudut atas membulat, sudut bawah tetap kotak */
.kartu-header {
  border-radius: 8px 8px 0 0;
}

/* sudut bawah membulat, sudut atas tetap kotak */
.kartu-footer {
  border-radius: 0 0 8px 8px;
}

/* hanya sudut kiri atas yang membulat */
.elemen-aksen {
  border-radius: 12px 0 0 0;
}

Pola 8px 8px 0 0 dan 0 0 8px 8px sering digunakan ketika kartu atau panel dibagi menjadi dua bagian — header di atas dan konten di bawah. Header mendapat radius di sudut atas, konten mendapat radius di sudut bawah, dan ketika digabungkan keduanya membentuk kartu dengan sudut membulat yang rapi.

Latihan

Buka file profil.css dari proyek portofolio yang sudah kita kerjakan bersama sejak Bab 3:

Tambahkan class .kartu-proyek yang memiliki border solid tipis #e2e8f0, border-radius 8px, dan padding 16px. Bandingkan tampilannya di browser sebelum dan sesudah penambahan border.
Buat class .kutipan-inspirasi yang menggunakan teknik border kiri: border-left berwarna #3b82f6 dengan ketebalan 4px, tanpa border di tiga sisi lainnya. Tambahkan padding-left yang cukup agar teks tidak menempel ke garis.
Coba buat avatar profil berbentuk lingkaran: elemen dengan lebar dan tinggi sama (misalnya 64px), background warna pilihan kamu, border-radius: 50%, dan border solid 3px. Rasakan perbedaannya ketika kamu mengganti 50% dengan nilai pixel yang lebih kecil.

Setelah border, ada satu properti yang terkait erat dan sering diajarkan bersamaan: outline. Sekilas outline mirip border, tapi keduanya berperilaku sangat berbeda dalam layout. Perbedaan itu yang akan kita telusuri di bab berikutnya.

BAB 10: Border CSS

Border-Style: Fondasi yang Wajib Ada

Border-Width: Mengatur Ketebalan

Ketebalan Berbeda Per Sisi

Border-Color: Mewarnai Garis

Warna Berbeda Per Sisi

Border Per Sisi

Shorthand Border

Border-Radius: Sudut yang Membulat

Radius Per Sudut

Latihan

Referensi