In this tutorial, you will learn-
In this article, you will learn-
CSS Border Color
The CSS border-color property defines the color of the border of a box.
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
• name – specify a color name, similar to “red”
• HEX – specify a HEX value, as “#ff0000”
• RGB – specify a RGB value, as “rgb(255,0,0)”
• HSL – specify a HSL value, as “hsl(0, 100%, half)”
Note: If border-color is not set, it inherits the color of the element.
Example
Demonstration of the different border colors:
<!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>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Result
The border-color Property
This property specifies the color of the four borders:
A solid red border
A solid green border
A dotted blue border
Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.
Specific Side Colors
The border-color property can have from one to four values (for the top line, right border, bottom border, and the left border).
Example
<!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>The border-color Property</h2>
<p>The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>
<p class="one">A solid multicolor border</p>
</body>
</html>
The border-color Property
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):
A solid multicolor border
HEX Values
The value of the border can likewise be specified using a hexadecimal value (HEX):
Example
<!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>The border-color Property</h2>
<p>The color of the border can also be specified using a hexadecimal value (HEX):</p>
<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>
The border-color Property
The color of the border can also be specified using a hexadecimal value (HEX):
A solid red border
A solid blue border
A solid grey border
RGB Values
Or by using RGB values:
Example
<!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>The border-color Property</h2>
<p>The color of the border can also be specified using RGB values:</p>
<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>
The border-color Property
The color of the border can also be specified using RGB values:
A solid red border
A solid blue border
A solid grey border
HSL Values
You can also use HSL values:
<!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>The border-color Property</h2>
<p>The color of the border can also be specified using HSL values:</p>
<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>
The border-color Property
The color of the border can also be specified using HSL values:
A solid red border
A solid blue border
A solid grey border
You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
