Beranda / CSS / Pemrograman / Web

Mengenal CSS Border Style: Bikin Tampilan Web Lebih Kece! (Tutorial CSS Part 15)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 15.0 : Logo CSS

Kalau kamu lagi ngulik-ngulik CSS, pasti udah nggak asing lagi dong sama yang namanya border? Yup, border itu garis pinggir yang bisa kamu tambahin ke elemen HTML — semacam bingkai gitu. Tapi, tahukah kamu kalau border di CSS bukan cuma soal “ada atau nggaknya garis”, tapi juga bisa dikustomisasi gaya tampilannya? Nah, di sinilah kita bahas si CSS Border Style!

Apa Itu Border Style?

border-style adalah properti CSS yang digunakan untuk menentukan gaya garis dari border sebuah elemen. Kamu bisa pakai style yang solid, putus-putus, bahkan none alias tanpa garis sama sekali. 

div {
  border-style: solid;
}

Artinya, elemen <div> akan punya border dengan garis solid.

Macam-Macam Nilai border-style

1. none

Artinya ya... nggak ada garis sama sekali. Cocok kalau kamu pengen ngilangin border default dari sebuah elemen. 

button {
  border-style: none;
}

2. solid

Ini yang paling umum dipakai. Garis tegas dan lurus. Cocok buat tampilan yang simpel dan profesional. 

p {
  border-style: solid;
}

3. dashed

Garis putus-putus kayak lintasan balap. Bisa bikin elemen kelihatan lebih playful atau informatif. 

div.warning {
  border-style: dashed;
}

4. dotted

Mirip kayak dashed, tapi lebih kecil karena titik-titik. Lucu juga sih kalau dipakai di elemen dekoratif. 

.note {
  border-style: dotted;
}

5. double

Garisnya dua! Lebih tegas dan bisa kelihatan elegan kalau dipakai dengan tebal yang pas. 

h2 {
  border-style: double;
}

6. groove, ridge, inset, outset

Ini jenis-jenis border yang punya efek 3D. Cocok buat kamu yang pengen sentuhan klasik atau nuansa "menonjol" di elemenmu. 

.box {
  border-style: groove;
}

Bisa Dipakai di Sisi Tertentu Aja?

Yes, tentu bisa! Kamu nggak harus pakai border di keempat sisi. CSS ngasih kamu kontrol penuh: 

div {
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: double;
}

Atau langsung satu baris empat nilai (urutan: top right bottom left):

div {
  border-style: solid dashed dotted double;
}

Contoh Kode Internal CSS Lengkap

Buat kamu yang pengen langsung praktek, nih contoh sederhana penggunaan berbagai border-style dalam satu halaman HTML dengan internal CSS: 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Border Style</title>
  <style>
    .solid-box {
      border: 2px solid black;
      padding: 10px;
      margin-bottom: 10px;
    }

    .dashed-box {
      border: 2px dashed blue;
      padding: 10px;
      margin-bottom: 10px;
    }

    .dotted-box {
      border: 2px dotted green;
      padding: 10px;
      margin-bottom: 10px;
    }

    .double-box {
      border: 4px double red;
      padding: 10px;
      margin-bottom: 10px;
    }

    .mixed-border {
      border-style: solid dashed dotted double;
      border-width: 3px;
      border-color: orange;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div class="solid-box">Ini border solid</div>
  <div class="dashed-box">Ini border dashed</div>
  <div class="dotted-box">Ini border dotted</div>
  <div class="double-box">Ini border double</div>
  <div class="mixed-border">Ini border campuran (top, right, bottom, left)</div>

</body>
</html>

Hasilnya:

Contoh CSS Border
Gambar 15.1 : Contoh CSS Border

Tips dari Mimin

  • Kombinasikan border-style dengan border-width dan border-color biar tampilannya makin keren.
  • Gunakan style yang sesuai dengan mood atau tujuan desain kamu. Misalnya, solid untuk serius, dashed untuk peringatan, dotted untuk dekorasi.
  • Jangan berlebihan juga, ya. Border yang terlalu rame malah bisa bikin desain kamu kelihatan norak 😅

Penutup

Gitu deh, sekilas tentang CSS Border Style. Ternyata, garis pinggir doang bisa punya banyak gaya, kan? Mulai dari yang formal sampai yang unik-unik. Jadi, jangan ragu buat eksplor dan main-main sama border kamu!

Selamat ngoding dan semoga desain web kamu makin kece! 💻✨

Posting Komentar untuk "Mengenal CSS Border Style: Bikin Tampilan Web Lebih Kece! (Tutorial CSS Part 15)"