Beranda / CSS / Pemrograman / Web

Mengenal CSS Border Width: Atur Ketebalan Border dengan Gaya (Tutorial CSS Part 16)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 16.0 : Logo CSS

Ketika kamu ngoding tampilan web, pasti nggak asing sama yang namanya border. Border ini semacam garis pinggir yang bisa bikin elemen HTML kamu kelihatan lebih tegas, rapi, atau bahkan kece. Nah, di artikel ini kita bakal bahas khusus tentang CSS border-width, alias properti buat ngatur ketebalan si border itu sendiri. Yuk, kita kulik bareng!

1. Apa Itu CSS border-width?

Sesuai namanya, border-width itu dipakai buat ngatur ketebalan garis border di sekitar elemen HTML. Kamu bisa ngasih ketebalan yang sama untuk semua sisi (atas, kanan, bawah, kiri), atau ngatur tiap sisinya satu-satu.

Contoh sederhana:

div {
  border: solid black;
  border-width: 4px;
}

Artinya, semua sisi border (atas, kanan, bawah, kiri) bakal punya ketebalan 4 piksel. Gampang, kan?

Oh ya, selain pakai nilai numerik kayak 2px, kamu juga bisa pakai keyword seperti:

  • thin → tipis
  • medium → sedang (ini default-nya)
  • thick → tebal

Tapi saran aja, biar lebih presisi, mending pakai ukuran jelas kayak px, em, atau rem.

🔸 Contoh Kode Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .kotak {
      border-style: solid;
      border-width: 4px;
      border-color: black;
      padding: 20px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="kotak">
    Ini kotak dengan border-width 4px di semua sisi
  </div>
</body>
</html>

Hasilnya:

Contoh CSS border-width
Gambar 16.1 : Contoh CSS border-width

2. Atur Ketebalan Sisi Tertentu (Specific Side Widths)

Kadang, kita cuma mau ngasih border di satu sisi aja, misalnya cuma di atas atau kiri. Tenang, CSS juga udah nyediain properti khusus buat itu:

  • border-top-width: ngatur ketebalan border atas
  • border-right-width: ngatur ketebalan border kanan
  • border-bottom-width: ngatur ketebalan border bawah
  • border-left-width: ngatur ketebalan border kiri 
div {
  border-top-width: 5px;
  border-right-width: 2px;
  border-bottom-width: 0px;
  border-left-width: 8px;
}

🔸 Contoh Kode Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .kotak-sisi {
      border-style: solid;
      border-color: blue;
      border-top-width: 5px;
      border-right-width: 2px;
      border-bottom-width: 0px;
      border-left-width: 8px;
      padding: 20px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="kotak-sisi">
    Border beda-beda ketebalan per sisi
  </div>
</body>
</html>

Hasilnya:

Contoh CSS Mengatur Ketebalan Border Tertentu
Gambar 16.2 : Contoh CSS Mengatur Ketebalan Border Tertentu

Bonus: Shortcut border-width

Mau lebih praktis? CSS juga punya shorthand alias penulisan singkat: 

div {
  border-style: solid;
  border-width: 5px 10px 2px 0px; /* top right bottom left */
}

Penjelasan urutannya mirip kayak arah jarum jam: atas → kanan → bawah → kiri.

🔸 Contoh Kode Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .kotak-shorthand {
      border-style: solid;
      border-color: green;
      border-width: 5px 10px 2px 0px;
      padding: 20px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="kotak-shorthand">
    Ini contoh shorthand border-width
  </div>
</body>
</html>

Hasilnya:

Contoh CSS Shortcut border-width
Gambar 16.3 : Contoh CSS Shortcut border-width

Penutup

border-width itu sederhana, tapi powerful banget buat bikin tampilan web kamu lebih menarik. Tinggal kombinasikan sama border-style dan border-color, kamu udah bisa dapetin berbagai efek visual keren.

Mau tampil minimalis? Bisa. Mau bold dan mencolok? Tinggal atur aja ukurannya. Yang penting, jangan takut buat eksplorasi!

Selamat bereksperimen dengan border CSS! 🎨💻

Posting Komentar untuk "Mengenal CSS Border Width: Atur Ketebalan Border dengan Gaya (Tutorial CSS Part 16)"