Updated June 22, 2023
Introduction to CSS Border Color
The space around the padding and margin is called The Color between the padding and margin is called Border color. Border color separates the HTML body from one content to another. Border color is applied on all sides at a time or different sides at a time by using border color. You can observe the difference between the padding, margin, and border color below. As we know, we always preferred CSS over common styles on all the pages.
How does Border color work in CSS?
Get border color around the content or image using the border-color property.
Syntax 1
div
{
border-color: value1, value2, value3, value4; //border color values
}Explanation: If we apply border color with four values, then the first value is for the top, the second value is for the right, the third value is for the bottom, and the fourth value is for the left applied, respectively.
Syntax 2
div
{
border-color: value1, value2, value3; //border color values
}Explanation: If we apply border color with three values, then the first value is for the top, the second value is for left and right, third value is for the bottom applied, respectively.
Syntax 3
div
{
border-color: value1, value2; //border color values
}Explanation: If we apply border color with two values, the first value is for the top and bottom, and the second value is for the left and right applied, respectively.
Syntax 4
div
{
border-color: value//border color value
}Explanation: If we apply border color with only a single value, use it equally for all four sides. Suppose we want to apply border style on only one side, like top, right, bottom, or left. You can use the below syntaxes.
Border Colors to Specific Side
Syntax 1
div
{
border-top-color: value//border top side color
}Syntax 2
div
{
border-right-color: value//border right side color
}Syntax 3
div
{
border-bottom-color: value//border bottom side color
}Syntax 4
div
{
border-left-color: value//border left side color
}Examples to Implement CSS Border Color
Here are the examples to implement CSS border color:
Example #1
BorderColor4ValuesandTopColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderColor4ValuesandTopColor.css">
<title>Border Color</title>
</head>
<body>
<font color="green"><h2>Border Color property with 4 values and border
top Color property</h2></font>
<p class="style1">Hi, I am designed with border color property by 4
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border top color property.</p>
</body>
</html>BorderColor4ValuesandTopColor.css
.style1 {
border-style:solid;
border-color: brown red blue green; /* Gives the color at top, right, bottom and left respectivily */
border-width: 10px;
font-size: 20px;
width: 900px;
}
.style2 {
border-top-style:solid;
border-top-color: blue;
border-width: 10px;
font-size: 20px;
width: 900px;
}Output:
Explanation: The first paragraph gives brown, red, blue, and green colors to the top, right, bottom, and left, respectively, by assigning four values to the border-color property. The second paragraph gives blue color by assigning a value to the border-top-color property.
Example #2
BorderColor3ValuesAndRightColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderColor3ValuesAndRightColor.css">
<title>Border Color</title>
</head>
<body>
<font color="green"><h2>Border Color property with 3 values and border
Right Color property</h2></font>
<p class="style1">Hi, I am designed with border color property by 3
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border right color property.</p>
</body>
</html>BorderColor3ValuesAndRightColor.css:
.style1 {
border-style: dotted; /*Gives the border with dotted lines*/
border-color: blue fuchsia olive;
/* Gives the color at top to blue color, left and right to fuchsia color, bottom to olive color*/
border-width: 10px;
font-size: 20px;
width: 900px;
}
.style2 {
border-right-style: dashed; /*Gives the border with dashed lines*/
border-right-color: green;
border-width: 10px;
font-size: 20px;
width: 900px;
}Output:
Explanation: The first paragraph gives blue to the top, fuchsia to the left, right and olive color to the bottom by assigning three values to the border-color property. The second paragraph gives green color by assigning a value to the border-right-color property.
Example #3
BorderColor2ValuesAndLeftColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderColor2ValuesAndLeftColor.css">
<title>Border Color</title>
</head>
<body>
<font color="green"><h2>Border Color property with 2 values and border
Left Color property</h2></font>
<p class="style1">Hi, I am designed with border color property by 2
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border left color property.</p>
</body>
</html>BorderColor2ValuesAndLeftColor.css:
.style1 {
border-style: double; /*Gives the border with double border*/
border-color: maroon navy;
/* Gives the color at top and bottom to maroon color, left and right to navy color*/
border-width: 10px;
font-size: 20px;
width: 900px;
}
.style2 {
border-left-style: double; /*Gives the border with double border*/
border-left-color: gray;
border-width: 10px;
font-size: 20px;
width: 900px;
}Output:
Explanation: The first paragraph gives maroon to the top, bottom, and navy color to the left and right by assigning two values to the border-color property. The second paragraph gives gray color by assigning a value to the border-left-color property.
Example #4
BorderColorSingleValueAndBottomColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderColorSingleValueAndBottomColor.css">
<title>Border Color</title>
</head>
<body>
<font color="green"><h2>Border Color property with Single values and border
Bottom Color property</h2></font>
<p class="style1">Hi, I am designed with border color property by Single
value (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border bottom color property.</p>
</body>
</html>BorderColorSingleValueAndBottomColor.css
.style1 {
border-style: solid; /*Gives the border with solid border*/
border-color: red;
/* Gives the color at top, right, left and bottom to maroon color*/
border-width: 10px;
font-size: 20px;
width: 900px;
}
.style2 {
border-bottom-style: solid; /*Gives the border with solid border*/
border-bottom-color: red;
border-width: 10px;
font-size: 20px;
width: 900px;
}Output:
Explanation: The first paragraph gives red color by assigning a single value to the border-color property. The second paragraph gives red color by assigning a value to the border-bottom-color property.
Conclusion
In a paragraph, one can use the border color to differentiate HTML content from other HTML content. Utilizing the “border-color” property achieves the border color. One can apply the border color to either all sides or a single side at a time, depending on the specific requirement.
Recommended Articles
We hope that this EDUCBA information on “CSS Border Color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
