CSS Border Color: Biar Tampilan Web Nggak Ngebosenin! (Tutorial CSS Part 17)

Gambar 17.0 : Logo CSS

Kalau kamu lagi ngulik CSS, pasti udah kenal sama yang namanya border. Tapi tahu nggak sih, selain bikin garis di sekeliling elemen, border juga bisa dimodifikasi warnanya biar tampilannya makin kece. Nah, di artikel ini kita bakal bahas tuntas soal CSS Border Color — dari yang basic sampai teknik pewarnaan yang lebih fleksibel. Yuk, kita mulai!

1. Apa Itu CSS Border Color?

border-color di CSS itu fungsinya buat ngasih warna ke garis pinggir elemen HTML. Biasanya dipakai barengan sama border-style dan border-width biar hasilnya kelihatan. Contoh paling basic kayak gini:

div {
  border: 2px solid;
  border-color: blue;
}

Dengan begitu, elemen <div> kamu bakal punya garis biru yang solid di sekelilingnya. Simple, tapi powerful!

2. Warna Border di Sisi Tertentu (Specific Side Colors)

Nggak harus semua sisi punya warna yang sama, lho. Kamu bisa kasih warna beda-beda di tiap sisi. CSS udah nyediain properti khusus buat ini:

div {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}

Hasilnya? Masing-masing sisi punya karakter sendiri. Cocok banget buat efek visual yang playful atau nge-highlight sisi tertentu dari elemen.

3. Gunakan Nilai HEX (#rrggbb)

Buat kamu yang suka main warna pake kode heksadesimal, CSS juga mendukung banget format ini. Misalnya:

div {
  border: 3px dashed;
  border-color: #FF5733;
}

Kode #FF5733 ini adalah warna oranye kemerahan. Enaknya HEX, kita bisa ngontrol campuran warna merah, hijau, dan biru secara presisi.

4. Pakai Format RGB

Selain HEX, kamu juga bisa pakai format RGB (Red, Green, Blue). Format ini cocok kalau kamu pengen lebih visual dalam ngatur proporsi warna:

div {
  border: 4px solid;
  border-color: rgb(60, 179, 113); /* warna seger: mediumseagreen */
}

Nilainya dari 0–255. Mau warna lebih transparan? Tinggal pakai rgba:

border-color: rgba(255, 0, 0, 0.5); /* merah setengah transparan */

5. Eksperimen dengan HSL

Buat yang demen main warna kayak desainer, format HSL (Hue, Saturation, Lightness) bisa jadi sahabat baru. Contoh penggunaannya:

div {
  border: 2px dotted;
  border-color: hsl(200, 100%, 50%);
}

Hue (0–360): arah warna di roda warna
Saturation (0–100%): seberapa "penuh" warnanya
Lightness (0–100%): tingkat kecerahan

Keren kan? Tinggal mainin angkanya, kamu bisa dapet warna yang dinamis banget!

Contoh: Kode HTML dengan Internal CSS

Biar makin jelas, yuk lihat contoh penggunaan border-color langsung di HTML pake internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Border Color</title>
  <style>
    .hex-border {
      border: 3px solid;
      border-color: #FF5733;
      padding: 10px;
      margin-bottom: 10px;
    }

    .rgb-border {
      border: 3px solid;
      border-color: rgb(60, 179, 113);
      padding: 10px;
      margin-bottom: 10px;
    }

    .hsl-border {
      border: 3px solid;
      border-color: hsl(200, 100%, 50%);
      padding: 10px;
      margin-bottom: 10px;
    }

    .multi-side {
      border-style: solid;
      border-width: 3px;
      border-top-color: red;
      border-right-color: green;
      border-bottom-color: blue;
      border-left-color: orange;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div class="hex-border">Border pakai HEX: #FF5733</div>
  <div class="rgb-border">Border pakai RGB: rgb(60, 179, 113)</div>
  <div class="hsl-border">Border pakai HSL: hsl(200, 100%, 50%)</div>
  <div class="multi-side">Border warna beda tiap sisi</div>

</body>
</html>

Hasilnya:

Gambar 17.1 : Contoh CSS border-color

Bonus: Kombinasi Warna Multi-Sisi

Bisa juga langsung pakai shorthand border-color dengan 2–4 nilai:

div {
  border: 2px solid;
  border-color: red green blue yellow;
}

Artinya:

Atas: merah
Kanan: hijau
Bawah: biru
Kiri: kuning

Kalau cuma 2 nilai, misalnya border-color: red blue; maka:

Atas & bawah: merah
Kiri & kanan: biru

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Border Multi Warna</title>
  <style>
    div {
      border: 2px solid;
      border-color: red green blue yellow;
      padding: 20px;
      text-align: center;
      margin: 30px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>

  <div>
    Border dengan warna berbeda tiap sisi:<br>
    Atas: Merah, Kanan: Hijau, Bawah: Biru, Kiri: Kuning
  </div>

</body>
</html>

Hasilnya:

Gambar 17.2 : Contoh CSS Kombinasi Warna Multi Sisi

Penutup

CSS border color itu nggak cuma sekadar garis, tapi bisa jadi elemen desain yang memperkuat tampilan website kamu. Mau tampil minimalis? Bisa. Mau tampil warna-warni? Bisa juga. Kuncinya, berani eksplorasi!

Jadi, sekarang tinggal kamu praktikkan aja. Coba mainin border-color dengan berbagai format dan lihat gimana efeknya ke layout kamu. Happy styling!

filesop.com