CSS Shorthand Border Property: Bikin Kode Makin Ringkas dan Rapi! (Tutorial CSS Part 19)

Gambar 19.0 : Logo CSS

Kalau kamu lagi ngulik-ngulik CSS, pasti udah nggak asing sama yang namanya border. Tapi, pernah nggak kamu nulis border-top, border-right, border-bottom, dan border-left satu-satu? Ribet banget, ya? Nah, kabar baiknya: CSS punya solusi praktis buat itu semua, namanya shorthand border property.

Apa Itu CSS Shorthand Border?

Sederhananya, shorthand itu cara singkat buat nulis beberapa properti CSS sekaligus dalam satu baris. Jadi, dari pada nulis empat baris kode buat masing-masing sisi border, kamu cukup satu baris aja.

Contohnya:

border: 2px solid #3498db;

Yap! Hanya satu baris, tapi udah mencakup tiga hal sekaligus:

Width (ketebalan border): 2px
Style (gaya border): solid
Color (warna border): #3498db

Format Umum Penulisan

border: [width] [style] [color];

Urutannya bisa fleksibel, tapi style wajib ada supaya browser bisa ngerti maksud kamu. Kalau cuma nulis 2px #3498db tanpa style, browser bakal bingung dan nggak nampilin border.

Contoh-Contoh Gampang

/* Border hitam, solid, 1 piksel */
border: 1px solid black;

/* Border merah, dotted, 3 piksel */
border: 3px dotted red;

/* Border biru, dashed, 5 piksel */
border: 5px dashed blue;

Bisa Untuk Satu Sisi Juga!

Kalau kamu cuma mau ngasih border di satu sisi, bisa pakai shorthand juga:

border-top: 2px dashed orange;
border-right: 2px dashed orange;

Atau misalnya kamu cuma mau border bawah aja:

border-bottom: 4px solid green;

Masih tetap shorthand, tapi khusus buat satu sisi.

Contoh Kode Internal CSS

Biar makin jelas, yuk kita lihat contoh penerapannya pakai internal CSS. Cukup tempelin aja di file HTML kamu, antara tag <style>:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Shorthand Border</title>
  <style>
    .kotak1 {
      border: 3px solid #2ecc71;
      padding: 20px;
      margin-bottom: 20px;
    }

    .kotak2 {
      border-top: 4px dashed #e74c3c;
      border-bottom: 4px dashed #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="kotak1">
    Ini kotak dengan border full (atas, kanan, bawah, kiri).
  </div>

  <div class="kotak2">
    Ini kotak dengan border hanya atas dan bawah.
  </div>

</body>
</html>

Hasilnya:

Gambar 19.1 : Contoh CSS Border Shorthand

Penjelasan:

.kotak1 pakai shorthand border biasa yang nempel ke semua sisi.
.kotak2 pakai shorthand juga, tapi spesifik untuk border-top dan border-bottom.

Penutup

CSS itu soal keindahan dan efisiensi. Nah, shorthand border property ini salah satu jurus ampuh buat bikin kode kamu lebih bersih dan cepat dipahami. Daripada nulis panjang-panjang, cukup satu baris udah bisa bikin elemen kamu tampil kece dengan border yang cantik.

Selamat ngoding, dan semoga kamu makin akrab sama CSS!

Kalau kamu punya pertanyaan atau pengen bahas properti CSS lain, tinggal tulis di kolom komentar, ya. 😉

filesop.com