Border CSS Adalah: Fungsi, Jenis-Jenis, dan Cara Mengatur Warna Border

Border artinya garis tepi atau bingkai. Di CSS, border adalah garis yang mengelilingi sebuah elemen — posisinya di antara padding dan margin dalam box model. Border diatur lewat tiga komponen: border-width (ketebalan garis), border-style (jenis garis), dan border-color (warna garis).

Kedengarannya sederhana, tapi border punya banyak detail yang sering bikin pemula tersandung: kenapa border-nya tidak muncul padahal sudah ditulis? Kenapa layout bergeser saat border ditambahkan? Apa bedanya border dengan outline? Panduan ini membahas semuanya secara berurutan — dari definisi dan fungsi, anatomi tiga komponen, semua jenis border-style lengkap dengan deskripsi visualnya, cara mengatur warna, sampai kesalahan umum yang hampir pasti kamu temui. Semua contoh kodenya bisa langsung kamu coba.

Border Adalah… (Definisi dan Fungsi Border)

Border adalah garis yang digambar di sekeliling kotak sebuah elemen HTML — bisa mengelilingi keempat sisi sekaligus atau hanya sisi tertentu. Fungsi utamanya adalah memberi batas visual: memisahkan satu elemen dari elemen lain, menandai area yang bisa diinteraksi, atau sekadar dekorasi. Setiap elemen HTML pada dasarnya adalah kotak, dan border adalah “garis pinggir” kotak itu.

Dalam praktik sehari-hari, border dipakai di mana-mana:

• Card dan panel — kotak konten dengan garis tipis di sekelilingnya supaya terlihat sebagai satu kesatuan.
• Input form — kolom teks hampir selalu punya border; saat error, border-nya berubah merah sebagai feedback.
• Tombol outline — tombol sekunder yang hanya punya garis tepi tanpa background penuh.
• Divider — garis pemisah antar seksi, sering dibuat dengan border-bottom satu sisi saja.
• Tabel — garis antar sel supaya data mudah dibaca.

Contoh paling dasar:

<div class="kotak">Halo, aku punya border!</div>

.kotak {
  border: 2px solid #3b82f6; /* ketebalan, jenis garis, warna */
  padding: 16px;
}

Satu baris border: 2px solid #3b82f6 menghasilkan garis biru lurus setebal 2 piksel yang mengelilingi elemen. Baris itu sebenarnya shorthand dari tiga properti terpisah — kita bedah di bagian berikutnya.

Perlu dicatat: border bukan cuma soal teknis CSS, tapi juga keputusan desain. Kapan border tipis lebih baik daripada shadow, kapan divider lebih tepat daripada border penuh — topik itu dibahas khusus di materi borders dan dividers dari sisi UI/UX. Sedangkan untuk sisi teknisnya, lesson border di Hyper Sheets membahasnya langkah demi langkah dengan editor langsung di browser.

Anatomi Border: border-width, border-style, dan border-color

Border tersusun dari tiga komponen: border-width mengatur ketebalan, border-style mengatur jenis garis, dan yang mengatur warna border adalah border-color. Jadi kalau kamu menemukan soal atau kuis berbunyi “pada format border, yang mengatur untuk warna border adalah…”, jawabannya: border-color. Ketiga komponen ini bisa ditulis terpisah atau digabung dalam satu shorthand border.

Versi terpisahnya seperti ini:

.kartu {
  border-width: 1px;      /* ketebalan garis */
  border-style: solid;    /* jenis garis */
  border-color: #e2e8f0;  /* warna garis */
}

Mari kenali karakter masing-masing komponen:

border-width — Ketebalan Garis

Nilainya bisa berupa satuan panjang (1px, 0.25rem) atau kata kunci thin, medium, dan thick. Nilai default-nya medium. Di proyek nyata, hampir semua orang memakai piksel eksplisit karena hasil kata kunci bisa sedikit berbeda antar browser.

.tipis  { border-width: 1px; }
.sedang { border-width: 3px; }
.tebal  { border-width: 6px; }

border-style — Jenis Garis (Komponen Paling Penting!)

border-style menentukan bentuk garisnya: lurus, putus-putus, titik-titik, ganda, dan seterusnya. Ini komponen yang wajib ada — nilai default-nya adalah none, artinya tanpa border-style, border tidak akan pernah muncul meskipun kamu sudah menulis border-width dan border-color. Ini sumber bug border nomor satu, dan kita bahas lebih dalam di bagian kesalahan umum.

border-color — Warna Garis

Menerima semua format warna CSS: nama warna (red), hex (#ef4444), rgb(), hsl(), sampai kata kunci spesial seperti transparent dan currentColor. Kalau kamu tidak menulis border-color sama sekali, border otomatis memakai warna teks elemen itu (nilai default-nya currentColor) — makanya border yang “lupa diwarnai” biasanya muncul hitam, mengikuti warna teks.

Shorthand border: Menulis Tiganya Sekaligus

Cara paling umum menulis border adalah shorthand satu baris:

.kartu {
  border: 1px solid #e2e8f0;
  /* sama persis dengan:
     border-width: 1px;
     border-style: solid;
     border-color: #e2e8f0; */
}

Fakta menarik: urutan nilai di shorthand sebenarnya bebas. border: solid 1px #e2e8f0 dan border: #e2e8f0 solid 1px sama-sama valid, karena browser bisa membedakan mana ketebalan, mana jenis garis, mana warna dari bentuk nilainya. Tapi konvensi yang dipakai hampir semua developer adalah urutan width → style → color (1px solid #000) — ikuti konvensi ini supaya kodemu mudah dibaca orang lain.

Yang tidak boleh: menulis dua nilai bertipe sama dalam satu shorthand. border: 1px 2px solid tidak valid karena ada dua nilai ketebalan — seluruh deklarasi akan diabaikan browser.

Kamu juga boleh menghilangkan sebagian nilai — asal border-style tetap ada:

.a { border: solid; }         /* muncul: medium, warna teks */
.b { border: 2px solid; }     /* muncul: 2px, warna teks */
.c { border: 2px #ef4444; }   /* TIDAK muncul: style-nya tidak ada! */

Jenis-Jenis Border: Semua Nilai border-style

Jenis border di CSS ada sepuluh: solid, dashed, dotted, double, groove, ridge, inset, outset, none, dan hidden. Empat yang pertama paling sering dipakai di web modern; empat berikutnya adalah efek 3D peninggalan era desain lama; dua terakhir sama-sama “mematikan” border dengan satu perbedaan halus di tabel.

Berikut tabel lengkapnya dengan deskripsi visual masing-masing:

Nilai	Tampilan Visual
solid	Garis lurus tanpa putus — jenis yang paling umum dipakai
dashed	Garis putus-putus berbentuk strip pendek berjarak
dotted	Rangkaian titik-titik bulat kecil
double	Dua garis sejajar dengan celah di tengah — butuh ketebalan minimal 3px agar dua garisnya terlihat
groove	Efek 3D seperti garis terukir masuk ke halaman; dibuat dari dua nuansa warna border
ridge	Kebalikan groove — garis tampak timbul keluar dari halaman
inset	Seluruh kotak tampak tenggelam ke dalam halaman (sisi atas-kiri gelap)
outset	Kebalikan inset — kotak tampak menonjol keluar (sisi atas-kiri terang)
none	Tidak ada border sama sekali — ini nilai default
hidden	Sama seperti none secara visual, tapi di tabel dengan border-collapse ia memenangkan konflik dan memaksa border sel tetangga ikut hilang

Coba sendiri semuanya dengan satu file:

<p class="solid">solid</p>
<p class="dashed">dashed</p>
<p class="dotted">dotted</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>

p {
  padding: 12px;
  border-width: 4px;   /* cukup tebal agar semua jenis terlihat jelas */
  border-color: #3b82f6;
}
.solid  { border-style: solid; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge  { border-style: ridge; }

Beberapa catatan praktis soal pemilihan jenis:

• solid adalah pilihan default untuk hampir semua kebutuhan: card, input, tabel, divider.
• dashed dan dotted sering dipakai untuk menandai area “sementara” atau interaktif — misalnya kotak drag-and-drop untuk upload file, atau placeholder area kosong.
• double, groove, ridge, inset, outset jarang muncul di desain modern, tapi tetap perlu kamu kenali karena sering keluar di soal ujian dan kadang muncul di kode lama. Efek 3D pada groove/ridge/inset/outset dihasilkan browser dengan menggelapkan dan menerangkan border-color — jadi efeknya baru kelihatan kalau warnanya bukan hitam pekat dan ketebalannya cukup (3px ke atas).

Kamu juga bisa memberi jenis berbeda per sisi:

.campur {
  border-style: solid dashed dotted double;
  /* atas: solid, kanan: dashed, bawah: dotted, kiri: double */
}

Pola empat nilai ini mengikuti arah jarum jam mulai dari atas — top, right, bottom, left. Pola yang sama berlaku untuk border-width dan border-color, dan akan kita pakai lagi di bagian border per sisi.

Cara Mengatur Warna Border dengan border-color

Cara mengatur warna border adalah lewat properti border-color, baik untuk keempat sisi sekaligus maupun per sisi. Properti ini menerima semua format warna CSS, plus dua nilai spesial yang sangat berguna: transparent dan currentColor.

Bentuk paling dasar — satu warna untuk semua sisi:

.sukses { border: 2px solid #22c55e; }          /* hijau via shorthand */
.error  {
  border-width: 2px;
  border-style: solid;
  border-color: #ef4444;                        /* merah via properti terpisah */
}

border-color juga menerima satu sampai empat nilai, mengikuti pola jarum jam yang sama seperti sebelumnya:

.satu   { border-color: #3b82f6; }                       /* semua sisi biru */
.dua    { border-color: #3b82f6 #ef4444; }               /* atas-bawah biru, kiri-kanan merah */
.tiga   { border-color: #3b82f6 #ef4444 #22c55e; }       /* atas, kiri-kanan, bawah */
.empat  { border-color: #3b82f6 #ef4444 #22c55e #f59e0b; } /* atas, kanan, bawah, kiri */

Kalau butuh presisi penuh, ada properti per sisi:

.aksen {
  border: 1px solid #e2e8f0;
  border-left-color: #3b82f6; /* hanya sisi kiri yang biru */
}

Trik border-color: transparent

transparent membuat border tidak terlihat tapi tetap memakan ruang. Ini beda fundamental dengan border: none yang menghapus border beserta ruangnya. Kegunaannya: mencegah layout “loncat” saat border muncul di state tertentu.

Kasus klasiknya tab navigasi — tab aktif punya garis bawah, tab lain tidak:

.tab {
  border-bottom: 3px solid transparent; /* ruang 3px sudah dipesan sejak awal */
}
.tab.aktif {
  border-bottom-color: #3b82f6;         /* tinggal ganti warna, layout tidak bergeser */
}

Tanpa trik ini, tab yang berubah jadi aktif akan mendorong konten di bawahnya turun 3px — kedipan layout yang terasa murahan. Dengan border transparan, ruangnya sudah dipesan sejak awal dan yang berubah hanya warnanya.

currentColor: Border yang Mengikuti Warna Teks

currentColor membuat border selalu senada dengan warna teks elemen. Karena ini justru nilai default border-color, kamu mendapatkannya gratis — cukup jangan menulis warna:

.tombol-outline {
  color: #3b82f6;
  border: 2px solid; /* otomatis biru, mengikuti color */
}
.tombol-outline:hover {
  color: #1d4ed8;    /* teks dan border berubah bersama, satu properti saja */
}

Border Per Sisi: border-top, border-right, border-bottom, border-left

Untuk membuat border hanya di satu sisi, pakai shorthand per sisi: border-top, border-right, border-bottom, atau border-left. Masing-masing menerima format nilai yang sama dengan border (width, style, color), tapi hanya menggambar di satu sisi.

.divider    { border-bottom: 1px solid #e2e8f0; } /* garis pemisah di bawah */
.sidebar    { border-right: 1px solid #e2e8f0; }  /* pembatas kolom kanan */
.blockquote { border-left: 4px solid #3b82f6; }   /* aksen kutipan di kiri */

Pola border-left tebal berwarna ini sangat populer untuk komponen alert atau callout:

<div class="alert alert-info">Sedang diproses, tunggu sebentar ya.</div>
<div class="alert alert-danger">Password minimal 8 karakter.</div>

.alert {
  padding: 12px 16px;
  border-left: 4px solid; /* warnanya diisi per varian di bawah */
  border-radius: 4px;
}
.alert-info {
  border-left-color: #3b82f6;
  background: #eff6ff;
}
.alert-danger {
  border-left-color: #ef4444;
  background: #fef2f2;
}

Kalau butuh kontrol paling detail, setiap sisi masih bisa dipecah lagi per komponen — border-top-width, border-top-style, border-top-color, dan seterusnya untuk keempat sisi. Total ada 12 properti longhand, tapi tenang: di praktik nyata kamu hampir selalu cukup dengan shorthand border plus satu-dua override per sisi.

Satu pola yang sering dipakai: pasang border di semua sisi dulu, lalu matikan sisi tertentu:

.sel-tabel {
  border: 1px solid #e2e8f0;
  border-top: none; /* sisi atas dihapus supaya tidak dobel dengan sel di atasnya */
}

Posisi Border di Box Model: Antara Padding dan Margin

Di box model CSS, border berada tepat di antara padding dan margin: urutan dari dalam ke luar adalah konten → padding → border → margin. Artinya border digambar di luar padding (sehingga ada jarak antara teks dan garis) tapi di dalam margin (sehingga jarak antar elemen dihitung dari sisi luar border).

Visualisasinya seperti ini:

┌─────────────── margin (transparan) ───────────────┐
│  ┌────────────── BORDER ──────────────┐           │
│  │  ┌────────── padding ──────────┐   │           │
│  │  │        konten (teks)        │   │           │
│  │  └─────────────────────────────┘   │           │
│  └─────────────────────────────────────┘          │
└────────────────────────────────────────────────────┘

Konsekuensi penting yang sering terlewat: border ikut menambah ukuran total elemen. Dengan box-sizing: content-box (default browser), elemen ber-width: 300px plus padding: 20px plus border: 2px sebenarnya selebar 300 + 40 + 4 = 344px di layar. Border 2px kiri dan kanan menyumbang 4px ekstra — cukup untuk merusak layout yang dihitung pas-pasan.

Solusinya adalah box-sizing: border-box, yang membuat width mencakup padding dan border sekaligus:

/* Reset standar yang dipakai hampir semua proyek modern */
*, *::before, *::after {
  box-sizing: border-box;
}

.kartu {
  box-sizing: border-box;
  width: 300px;              /* total tetap 300px... */
  padding: 20px;             /* ...padding masuk hitungan... */
  border: 2px solid #e2e8f0; /* ...border juga masuk hitungan */
}

Kalau hubungan width, padding, dan border ini masih terasa abstrak, baca dulu penjelasan lengkapnya di artikel width dan height di CSS — di sana perhitungan content-box vs border-box dibedah dengan angka konkret. Untuk latihan interaktifnya, lesson box model membiarkan kamu mengubah nilai dan melihat kotaknya membesar-mengecil secara langsung.

Border vs Outline: Apa Bedanya?

Perbedaan utama border dan outline: border adalah bagian dari box model dan memakan ruang layout, sedangkan outline digambar di luar border tanpa memengaruhi ukuran atau posisi elemen apa pun. Keduanya sama-sama garis di sekeliling elemen, tapi perannya berbeda.

Perbandingan lengkapnya:

Aspek	border	outline
Memakan ruang layout	Ya — menambah ukuran total elemen	Tidak — digambar “melayang” di atas layout
Posisi	Antara padding dan margin	Di luar border (bisa digeser dengan outline-offset)
Bisa per sisi	Ya (border-top, dll.)	Tidak — selalu keempat sisi
Kegunaan khas	Desain visual permanen	Focus ring (indikator fokus keyboard)

Kegunaan utama outline adalah focus ring — garis yang muncul saat elemen difokus lewat keyboard (Tab) supaya pengguna tahu posisinya. Karena outline tidak memakan ruang, ia bisa muncul dan hilang tanpa menggeser satu piksel pun:

.tombol:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px; /* beri jarak antara outline dan tepi tombol */
}

Peringatan penting: kamu mungkin pernah melihat outline: none dipakai untuk “membersihkan” garis biru bawaan browser. Jangan lakukan itu tanpa pengganti — pengguna keyboard jadi tidak bisa melihat elemen mana yang sedang aktif. Kalau tidak suka gaya default browser, ganti dengan focus style milikmu sendiri seperti contoh di atas, jangan dihapus begitu saja.

Aturan praktisnya: border untuk desain, outline untuk fokus. Kalau garisnya bagian dari tampilan permanen elemen, pakai border. Kalau garisnya indikator state yang muncul-hilang dan tidak boleh menggeser layout, outline (atau trik border transparan dari bagian sebelumnya) adalah jawabannya.

border-radius: Membuat Sudut Border Melengkung

border-radius melengkungkan sudut kotak elemen — termasuk border, background, dan area klik-nya. Meski namanya mengandung kata “border”, properti ini bekerja bahkan tanpa border sama sekali; ia membulatkan sudut kotaknya, dan kalau ada border, garisnya otomatis ikut melengkung.

.kartu   { border: 1px solid #e2e8f0; border-radius: 12px; } /* sudut membulat */
.pill    { border: 1px solid #e2e8f0; border-radius: 9999px; } /* bentuk kapsul */
.avatar  { border: 3px solid #3b82f6; border-radius: 50%; }  /* lingkaran penuh */

Tiga resep di atas mencakup 90% kebutuhan sehari-hari: card dengan sudut halus, badge/tombol berbentuk pil, dan avatar bundar. Nilai 50% mengubah kotak persegi menjadi lingkaran sempurna — syaratnya lebar dan tinggi elemen harus sama.

border-radius punya banyak variasi lanjutan (radius berbeda per sudut, sudut elips, sampai bentuk organik) yang dibahas tuntas di lesson border-radius lengkap dengan preview interaktifnya.

Border di Tailwind CSS

Di Tailwind CSS, border diatur lewat utility class: border untuk garis 1px, border-2/border-4/border-8 untuk ketebalan lain, border-{warna} untuk warna, dan border-dashed/border-dotted untuk jenis garis. Konsepnya persis sama dengan CSS murni — class-class ini hanyalah pembungkus tipis di atas border-width, border-style, dan border-color.

<div class="border border-slate-200 rounded-lg p-4">
  Card standar: border 1px abu-abu, sudut membulat.
</div>

<button class="border-2 border-orange-500 text-orange-500 rounded px-4 py-2">
  Tombol outline oranye
</button>

<div class="border-l-4 border-blue-500 bg-blue-50 p-3">
  Alert dengan aksen border kiri.
</div>

Beberapa padanan yang paling sering dipakai:

• border → border-width: 1px (style solid sudah otomatis dari reset Tailwind)
• border-2, border-4, border-8 → ketebalan 2px, 4px, 8px
• border-t, border-r, border-b, border-l → border satu sisi saja
• border-orange-500, border-slate-200 → warna dari palet Tailwind
• divide-y, divide-x → otomatis memberi border pemisah di antara anak-anak elemen (misalnya antar baris list) tanpa garis sisa di tepi

Kalau kamu belum familiar dengan cara kerja utility-first, mulai dari panduan Tailwind CSS untuk pemula, lalu latih khusus topik ini di lesson border dan rounded versi Tailwind.

Praktik: Membuat Card Profil dengan Border

Mari gabungkan semuanya dengan membuat satu komponen nyata: card profil dengan border container, avatar bundar, divider, dan input yang berubah warna saat fokus. Komponen kecil ini memakai hampir semua konsep dari artikel ini sekaligus.

Kalau struktur HTML-nya masih terasa asing, mampir dulu ke panduan belajar HTML untuk pemula — di sini kita fokus ke border-nya.

Langkah 1: Struktur HTML

<div class="profil">
  <img class="avatar" src="foto.jpg" alt="Foto profil Andi" />
  <h2>Andi Pratama</h2>
  <p class="peran">Front-End Developer</p>

  <div class="statistik">
    <div>12 Proyek</div>
    <div>340 Poin</div>
  </div>

  <label for="pesan">Kirim pesan</label>
  <input id="pesan" type="text" placeholder="Tulis sesuatu..." />
</div>

Langkah 2: Border Container + Sudut Membulat

* { box-sizing: border-box; } /* supaya border tidak menambah lebar total */

.profil {
  width: 320px;
  padding: 24px;
  border: 1px solid #e2e8f0;  /* garis tipis netral, bukan hitam pekat */
  border-radius: 16px;
}

Perhatikan pilihan warnanya: #e2e8f0 (abu-abu sangat muda), bukan black. Border hitam 1px terasa keras dan “berat”; card di aplikasi modern hampir selalu memakai border abu netral yang lembut. Dan karena kita pakai border-box, lebar card tetap tepat 320px meski ada padding dan border.

Langkah 3: Avatar Bundar dengan Border Aksen

.avatar {
  width: 80px;
  height: 80px;
  border: 3px solid #3b82f6; /* cincin biru di sekeliling foto */
  border-radius: 50%;        /* lingkaran penuh */
  object-fit: cover;         /* foto terpotong rapi, tidak gepeng */
}

Kombinasi border + border-radius: 50% menghasilkan efek “cincin” di sekeliling avatar — pola yang kamu lihat di hampir semua aplikasi sosial.

Langkah 4: Divider dengan Border Satu Sisi

.statistik {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0; /* garis pemisah dari konten di atasnya */
}

Tidak perlu elemen hr tambahan — border-top pada seksi berikutnya sudah berfungsi sebagai divider, dan padding-top memberi napas antara garis dengan isinya.

Langkah 5: Input dengan Border yang Merespons Fokus

input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
input:focus-visible {
  outline: none;                /* ganti outline default... */
  border-color: #3b82f6;        /* ...dengan border biru... */
  box-shadow: 0 0 0 3px #bfdbfe; /* ...plus ring lembut sebagai fokus baru */
}

Di sini kita mengganti focus style bawaan dengan versi sendiri: border berubah biru plus ring lembut dari box-shadow. Karena yang berubah hanya border-color (bukan border-width), layout tidak bergeser sedikit pun saat input difokus — dan indikator fokusnya tetap jelas, jadi aksesibilitas aman.

Selesai! Satu card profil utuh yang memakai border container, border aksen, border satu sisi sebagai divider, dan border responsif pada state fokus.

Kesalahan Umum Saat Menggunakan Border

Kesalahan border paling umum: menulis border-width atau border-color tanpa border-style (border tidak akan muncul), lupa bahwa border menambah ukuran elemen, dan menghapus outline fokus tanpa pengganti. Berikut daftar lengkapnya beserta solusinya.

1. Border Tidak Muncul karena Tidak Ada border-style

Ini jebakan nomor satu. Default border-style adalah none — jadi dua deklarasi ini tidak menghasilkan apa-apa:

/* Keduanya TIDAK menampilkan border apa pun */
.a { border-width: 2px; }
.b { border-width: 2px; border-color: red; }

/* Baru muncul setelah style-nya ada */
.c { border-width: 2px; border-style: solid; border-color: red; }
.d { border: 2px solid red; } /* atau langsung shorthand */

Ketebalan dan warna saja tidak cukup; browser butuh tahu jenis garisnya dulu. Kalau border-mu “hilang misterius”, cek border-style sebelum yang lain.

2. Border Menggeser Layout karena Menambah Ukuran Total

Tanpa box-sizing: border-box, menambahkan border: 2px pada elemen width: 300px membuat lebar aslinya jadi 304px — cukup untuk membuat kolom turun baris atau elemen tetangga bergeser. Biasakan reset box-sizing: border-box di awal setiap proyek, atau pakai trik border transparan kalau border-nya hanya muncul di state tertentu (hover, aktif).

3. Menghapus Outline Fokus Tanpa Pengganti

outline: none pada input atau tombol membuat pengguna keyboard buta arah — tidak ada tanda elemen mana yang sedang aktif. Kalau gaya default browser tidak cocok dengan desainmu, ganti, jangan hapus: pasang outline custom atau kombinasi border-color + box-shadow seperti pada praktik di atas.

4. Nilai Ganda di Shorthand

Urutan nilai shorthand memang bebas, tapi tipe nilai yang sama tidak boleh muncul dua kali:

.salah { border: 1px 2px solid red; }  /* dua ketebalan → seluruh baris diabaikan */
.benar { border: 1px solid red; }

Kalau kamu ingin ketebalan berbeda per sisi, jangan paksakan di shorthand border — pakai border-width: 1px 2px (pola jarum jam) atau shorthand per sisi seperti border-top.

5. Jenis Border Dekoratif Terlihat “Rusak” karena Terlalu Tipis

double butuh ruang untuk dua garis plus celah — pada border-width: 1px atau 2px ia tampak seperti solid biasa. Begitu juga groove dan ridge yang butuh ketebalan cukup (dan warna yang bukan hitam pekat) agar efek dua-nuansanya terlihat. Aturan praktis: jenis-jenis dekoratif ini baru “hidup” mulai 3–4px.

6. Memakai Border Padahal Butuh Outline (atau Sebaliknya)

Border yang muncul saat hover akan menggeser konten karena memakan ruang; untuk indikator state yang muncul-hilang, pakai outline atau pesan ruangnya sejak awal dengan border-color: transparent. Sebaliknya, jangan memakai outline untuk garis desain permanen — ia tidak bisa per sisi dan tidak ikut mengatur jarak layout.

FAQ Seputar Border CSS

Border artinya apa?

Border artinya garis tepi atau bingkai. Dalam konteks CSS, border adalah garis yang digambar mengelilingi sebuah elemen HTML — posisinya di antara padding (jarak dalam) dan margin (jarak luar). Ketebalannya, jenis garisnya, dan warnanya bisa diatur lewat properti border-width, border-style, dan border-color.

Apa fungsi border?

Fungsi border adalah memberi batas visual pada elemen: memisahkan konten dari sekitarnya, menandai area interaktif (seperti input form), memberi feedback state (border merah saat error), dan sebagai elemen dekorasi atau pemisah (divider). Border satu sisi seperti border-bottom juga umum dipakai sebagai garis pemisah antar seksi.

Pada format border, yang mengatur untuk warna border adalah?

border-color. Format border terdiri dari tiga komponen: border-width mengatur ketebalan, border-style mengatur jenis garis, dan border-color mengatur warna. Di shorthand border: 1px solid red, nilai red itulah yang dibaca sebagai border-color.

Apa saja jenis-jenis border?

Nilai border-style ada sepuluh: solid (garis lurus), dashed (putus-putus), dotted (titik-titik), double (garis ganda), groove (terukir masuk), ridge (timbul keluar), inset (kotak tenggelam), outset (kotak menonjol), none (tanpa border, nilai default), dan hidden (seperti none, tapi memenangkan konflik border pada tabel).

Apa perbedaan border dan outline?

Border adalah bagian dari box model — ia memakan ruang dan menambah ukuran total elemen, serta bisa diatur per sisi. Outline digambar di luar border tanpa memengaruhi layout sama sekali dan selalu mengelilingi keempat sisi; kegunaan utamanya adalah focus ring untuk navigasi keyboard. Ringkasnya: border untuk desain, outline untuk indikator fokus.

Bagaimana cara membuat border hanya di satu sisi?

Pakai shorthand per sisi: border-top, border-right, border-bottom, atau border-left. Contohnya border-bottom: 1px solid #e2e8f0 membuat garis hanya di sisi bawah — pola umum untuk divider. Kamu juga bisa memasang border di semua sisi lalu mematikan salah satunya, misalnya border: 1px solid gray; border-top: none;.

Langkah Selanjutnya

Sekarang kamu sudah pegang semuanya: border artinya garis tepi, tersusun dari tiga komponen (border-width, border-style, border-color — dan ya, yang mengatur warnanya adalah border-color), punya sepuluh jenis garis, bisa dipasang per sisi, duduk di antara padding dan margin dalam box model, dan berbeda peran dengan outline.

Seperti biasa, konsep baru melekat lewat praktik — coba tulis ulang komponen card profil dari artikel ini tanpa melihat kodenya, lalu bereksperimen: ganti jenis garisnya, mainkan warnanya per sisi, tambahkan border-radius. Kalau mau latihan yang terstruktur dengan feedback langsung, lesson border di Hyper Sheets menyediakan editor interaktif yang mengecek jawabanmu lesson per lesson.

Setelah border lancar, lanjutkan ke properti box model tetangganya — mulai dari memahami cara kerja width dan height supaya perhitungan ukuran elemenmu selalu presisi. Selamat ngoding!