Beranda / CSS / Pemrograman / Web

Mengenal CSS Border Satu Per Satu: Atur Sisi Border Sesukamu! (Tutorial CSS Part 18)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 18.0 : Logo CSS

Halo, para pejuang kode! 👋

Pernah nggak sih kamu pengin kasih border cuma di bagian atas elemen aja? Atau cuma di kanan doang? Nah, di sinilah fitur CSS Border - Individual Sides jadi penyelamat hidup kita sebagai front-end developer.

Kalau kamu udah familiar sama properti border, kamu pasti tahu kalau itu langsung ngasih garis di keempat sisi elemen. Tapi kalau cuma mau satu atau dua sisi aja, gimana?

Tenang, CSS udah nyiapin cara praktisnya!

1. Apa Itu CSS Border Individual Sides?

Intinya, kamu bisa ngatur border per sisi: atas, kanan, bawah, atau kiri. CSS nyediain properti khusus buat itu, yaitu:

  • border-top
  • border-right
  • border-bottom
  • border-left

Masing-masing properti itu bisa kamu atur mulai dari ketebalan, jenis garis, sampai warnanya.

2. Contoh Kode HTML + Internal CSS

Langsung aja cek contoh berikut ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh CSS Border Sisi</title>
  <style>
    .satu-sisi {
      border-top: 2px solid red;
      padding: 10px;
      margin-bottom: 10px;
    }

    .dua-sisi {
      border-left: 3px dashed blue;
      border-right: 3px dashed blue;
      padding: 10px;
      margin-bottom: 10px;
    }

    .tiga-sisi {
      border-top: 2px solid green;
      border-right: 2px solid green;
      border-bottom: 2px solid green;
      padding: 10px;
      margin-bottom: 10px;
    }

    .empat-sisi {
      border-top: 1px solid gray;
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      border-left: 1px solid gray;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="satu-sisi">
    Border hanya di atas (top)
  </div>

  <div class="dua-sisi">
    Border di kiri dan kanan (left & right)
  </div>

  <div class="tiga-sisi">
    Border di atas, kanan, dan bawah (top, right, bottom)
  </div>

  <div class="empat-sisi">
    Border di keempat sisi (top, right, bottom, left)
  </div>

</body>
</html>

Hasilnya:

Contoh CSS Individual Sides
Gambar 18.1 : Contoh CSS Individual Sides

Penjelasan Singkat:

  • .satu-sisi: hanya ada garis merah di atas.
  • .dua-sisi: garis biru dashed di kiri dan kanan.
  • .tiga-sisi: tiga sisi pakai garis hijau solid.
  • .empat-sisi: semua sisi pakai garis abu-abu tipis.

3. Kesimpulan

Dengan border-top, border-right, border-bottom, dan border-left, kamu bisa bebas atur gaya border sesuai kebutuhan desain. Lebih fleksibel, lebih kreatif, dan tentunya lebih rapi daripada pakai border langsung.

Posting Komentar untuk "Mengenal CSS Border Satu Per Satu: Atur Sisi Border Sesukamu! (Tutorial CSS Part 18)"