Introduction to CSS Border Color
The space around padding and margin is called The Color between padding and margin is called as Border color. Border color is used when we want to separate the HTML body from one content to another content. Border color is applied in all sides at a time or different sides at a time by using border-color The difference between padding, margin and border color you can observer below As we know common styles in all the pages, we always preferred CSS over
How does Border color work in CSS?
Get border color around the content or image used border-color property.
Syntax 1
Code:
div
{
border-color: value1, value2, value3, value4; //border color values
}Explanation: If we apply border-color with 4 values then first value is for top, second value is for right, third value is for bottom and fourth value is for left applied respectively.
Syntax 2
Code:
div
{
border-color: value1, value2, value3; //border color values
}Explanation: If we apply border-color with 3 values then first value is for top, second value is for left and right, third value is for bottom applied respectively.
Syntax 3
Code:
div
{
border-color: value1, value2; //border color values
}Explanation: If we apply border-color with 2 values, then first value is for top and bottom and second value is for left and right applied respectively.
Syntax 4
Code:
div
{
border-color: value//border color value
}Explanation: If we apply border-color with only single value, then applied it for all four sides equally.If we want to apply border style only one side like top or right or bottom or left. You can use below syntaxes.
Border Colors to Specific Side
Syntax 1
Code:
div
{
border-top-color: value//border top side color
}Syntax 2
Code:
div
{
border-right-color: value//border right side color
}Syntax 3
Code:
div
{
border-bottom-color: value//border bottom side color
}Syntax 4
Code:
div
{
border-left-color: value//border left side color
}Examples to Implement CSS Border Color
Below are the examples mentioned:
Example #1
BorderColor4ValuesandTopColor.html
HTML Code:
<!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>CSS Code:
.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: First paragraph gives brown, red, blue and green color to top, right, bottom and left respectively by assigning 4 values to border-color property.Second paragraph gives blue color by assigning a value to border-top-color property.
Example #2
BorderColor3ValuesAndRightColor.html
HTML Code:
<!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>CSS Code:
.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: First paragraph gives blue to top, fuchsia to left, right and olive color to bottom by assigning 3 values to border-color property.Second paragraph gives green color by assigning a value to border-right-color property.
Example #3
BorderColor2ValuesAndLeftColor.html
HTML Code:
<!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>CSS Code:
.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: First paragraph gives maroon to top, bottom and navy color to left, right by assigning 2 values to border-color property.Second paragraph gives gray color by assigning a value to border-left-color property.
Example #4
BorderColorSingleValueAndBottomColor.html
HTML Code:
<!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>CSS Code:
.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: First paragraph gives red color by assigning single value to border-color property.Second paragraph gives red color by assigning a value to border-bottom-color property.
Conclusion
Border color is used for varying the one HTML content with other HTML content in a paragraph. Border color can be achieved by border-color property. Border color can be applied to all sides or single side at a time based on requirement.
Recommended Articles
This is a guide to CSS Border Color. Here we discuss the introduction to CSS Border Color, how does it work, HTML and CSS codes with outputs. You can also go through our other related articles to learn more –
