Warna Batas CSS

Warna Batas CSS

border-color Properti digunakan untuk menata warna empat garis.

Dapat diatur warna melalui cara berikut:

  • name - Tentukan nama warna, seperti "merah"
  • HEX - Tentukan nilai heksadesimal, seperti "#ff0000"
  • RGB - Tentukan nilai RGB, seperti "rgb(255,0,0)"
  • HSL - Tentukan nilai HSL, seperti "hsl(0, 100%, 50%)"
  • transparent

Keterangan:Jika belum diset border-colorjika tidak diset, maka akan mewarisi warna elemen.

Contoh

Pertunjukan warna garis yang berbeda:

p.one {
  border-style: solid;
  border-color: merah;
}
p.two {
  border-style: solid;
  border-color: hijau;
}
p.three {
  border-style: dotted;
  border-color: biru;
}

Hasil:

Garis garis merah

Garis garis hijau

Garis poin biru

Coba Sendiri

Warna garis khusus

border-color Properti dapat diatur dengan satu hingga empat nilai (digunakan untuk garis atas, garis kanan, garis bawah, dan garis kiri).

Contoh

p.one {
  border-style: solid;
  border-color: merah hijau biru kuning; /* atas merah, kanan hijau, bawah biru, kiri kuning */
}

Coba Sendiri

Nilai HEX

Warna batas dapat ditentukan menggunakan nilai heksadesimal (HEX):

Contoh

p.one {
  border-style: solid;
  border-color: #ff0000; /* Merah */
}

Coba Sendiri

Nilai RGB

atau gunakan nilai RGB:

Contoh

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* Merah */
}

Coba Sendiri

Nilai HSL

Juga dapat digunakan nilai HSL:

Contoh

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* Merah */
}

Coba Sendiri

Anda dapat mencoba di Warna CSS Belajar lebih banyak tentang nilai HEX, RGB, dan HSL di bab.