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>
