CSS border-color
Properti border-color
digunakan untuk mengatur warna batas/border suatu elemen HTML.
Warna dapat diatur dengan:
- Nama warna – menentukan warna dengan nama warna, seperti “red”
- HEX – menentukan nilai HEX, seperti “#ff0000”
- RGB – menentukan nilai RGB, seperti “rgb(255,0,0)”
- HSL – menentukan nilai HSL, seperti “hsl(0, 100%, 50%)”
- Transparansi
Catatan: Jika border-color
tidak disetel, maka warna batas/border elemen akan diwarisi dari elemen induk.
Contoh
Berikut merupakan contoh 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 border-color</h2>
<p>Properti ini menentukan warna empat border:</p>
<p class ="one">Border merah solid</p>
<p class ="two">Border hijau solid</p>
<p class ="three">Border biru dotted</p>
<p><b>Catatan:</b> Properti "border-color" tidak berfungsi jika digunakan sendiri. Gunakan properti "border-style" untuk menentukan border terlebih dahulu.</p>
</body></html>
Warna Sisi Batas Tertentu
Dengan menggunakan properti border-color
maka nilai warna untuk border atas, border kanan, border bawah dan border kiri, dapat ditentukan secara spesifik atau dengan nilai yang berbeda.
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 border-color</h2>
<p>Dengan menggunakan properti border-color maka nilai warna untuk border atas, border kanan, border bawah dan border kiri, dapat ditentukan secara spesifik atau dengan nilai yang berbeda (top border, right border, bottom border, dan left border):</p>
<p class ="one">Border berbagai warna yang solid</p>
</body></html>
Nilai HEX
Warna border juga dapat ditentukan menggunakan nilai HEX (heksadesimal):
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 border-color</h2>
<p>Warna border juga dapat ditentukan menggunakan nilai heksadesimal (HEX):</p>
<p class ="one">Border merah solid</p>
<p class ="two">Border biru solid</p>
<p class ="three">Border abu-abu solid</p>
</body></html>
Nilai RGB
Menentukan nilai warna border dengan menggunakan nilai RGB (Red, Green, Blue):
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 border-color</h2>
<p>Warna border juga dapat ditentukan menggunakan nilai RGB:</p>
<p class ="one">Border merah solid</p>
<p class ="two">Border biru solid</p>
<p class ="three">Border abu-abu solid</p>
</body></html>
Nilai HSL
Untuk menentukan nilai warna border, juga dapat menggunakan nilai HSL (Hue, Saturation, lightness) :
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 border-color</h2>
<p>Warna border juga dapat ditentukan menggunakan nilai HSL:</p>
<p class ="one">Border merah solid</p>
<p class ="two">Border biru solid</p>
<p class ="three">Border abu-abu solid</p>
</body></html>
Tutorial sebelumnya : CSS Border
Tutorial setelahnya : CSS Border Untuk Setiap Sisi
Semua Tutorial CSS : Tutorial CSS