CSS Border Color
The border-color property sets the color of the four borders.
The color can be given as a name (like red), a HEX value (like #ff0000), an RGB value (like rgb(255,0,0)), an HSL value (like hsl(0, 100%, 50%)), or transparent.
Note: If border-color is not set, the border uses the element's text color.
Example
Each paragraph has a border in a different named color.
<style> block, make three bordered paragraph classes: solid red, solid green, and dotted blue. Each must set border-style too. Add a paragraph for each.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<p class="one">Red border</p>
<p class="two">Green border</p>
<p class="three">Blue border</p>
</body>
</html>
Specific Side Colors
The border-color property can take from one to four values, for the top, right, bottom, and left borders.
Example
Four values give each side its own color.
<style> block, make a solid-bordered paragraph with border-color "red green blue yellow" (red top, green right, blue bottom, yellow left). Add a paragraph using it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>
<p class="one">Red top, green right, blue bottom, yellow left.</p>
</body>
</html>
HEX Values
The border color can also be set with a hexadecimal (HEX) value.
Example
The border color is set with the HEX value #ff0000.
<style> block, make a solid-bordered paragraph with border-color #ff0000 (red). Add a paragraph using it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with a HEX value.</p>
</body>
</html>
RGB Values
The border color can also be set with an RGB value.
Example
The border color is set with rgb(255, 0, 0).
<style> block, make a solid-bordered paragraph with border-color rgb(255, 0, 0) (red). Add a paragraph using it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an RGB value.</p>
</body>
</html>
HSL Values
You can also set the border color with an HSL value.
You can learn more about HEX, RGB, and HSL in the CSS Colors chapters.
Example
The border color is set with hsl(0, 100%, 50%).
<style> block, make a solid-bordered paragraph with border-color hsl(0, 100%, 50%) (red). Add a paragraph using it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an HSL value.</p>
</body>
</html>