Home » CSS » Border Color di CSS: Code dan Cara Membuatnya

Border Color di CSS: Code dan Cara Membuatnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

Border Color di CSS

Properti border-color digunakan untuk mengatur warna empat batas.

Warna dapat diatur dengan:

name – tentukan nama warna, seperti “merah”
HEX – tentukan nilai HEX, seperti “# ff0000”
RGB – tentukan nilai RGB, seperti “rgb (255,0,0)”
HSL – tentukan nilai HSL, seperti “hsl (0, 100%, 50%)”
transparan

Catatan: Jika border-color tidak disetel maka hal itu akan mewarisi warna elemen.

Contoh
Demonstrasi warna border yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
</head>
<body>

<h2> Properti warna batas </h2>
<p> Properti ini menetapkan warna empat batas: </p>

<p class = "one"> Bingkai merah solid </p>
<p class = "two"> Garis hijau solid </p>
<p class = "three"> Garis tepi biru putus-putus </p>

<p> <b> Catatan: </b> Properti "border-color" tidak berfungsi jika digunakan sendiri. Gunakan properti "border-style" untuk menyetel batas terlebih dahulu. </p>

</body>
</html>

Warna Samping Tertentu

Properti border-color dapat memiliki satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri).

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>

<h2> Properti warna batas </h2>
<p> Properti warna-batas dapat memiliki dari satu sampai empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri): </p>

<p class = "one"> Bingkai banyak warna yang solid </p>

</body>
</html>

Nilai HEX

Warna border juga dapat ditentukan menggunakan nilai heksadesimal (HEX):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

p.two {
  border-style: solid;
  border-color: #0000ff; /* blue */
}

p.three {
  border-style: solid;
  border-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2> Properti warna batas </h2>
<p> Warna perbatasan juga dapat ditentukan menggunakan nilai heksadesimal (HEX): </p>

<p class = "one"> Bingkai merah solid </p>
<p class = "two"> Bingkai biru solid </p>
<p class = "three"> Garis abu-abu solid </p>

</body>
</html>

Nilai RGB

Atau dengan menggunakan nilai RGB:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

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

p.three {
  border-style: solid;
  border-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2> Properti warna batas </h2>
<p> Warna perbatasan juga dapat ditentukan menggunakan nilai RGB: </p>

<p class = "one"> Bingkai merah solid </p>
<p class = "two"> Bingkai biru solid </p>
<p class = "three"> Garis abu-abu solid </p>

</body>
</html>

Nilai HSL

Anda juga dapat menggunakan nilai HSL:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

p.two {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); /* blue */
}

p.three {
  border-style: solid;
  border-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2> Properti warna batas </h2>
<p> Warna perbatasan juga dapat ditentukan menggunakan nilai HSL: </p>

<p class = "one"> Bingkai merah solid </p>
<p class = "two"> Bingkai biru solid </p>
<p class = "three"> Garis abu-abu solid </p>

</body>
</html>

You may also like