The border-color property is used to add color to the border of an element. The border-color property will only work when the border-style property is defined first, which is used to set the borders. This property will not work alone. This can take one to four values for the top border, right border, bottom border, and left border respectively. If this property is not set then it inherits the color of the element.
Syntax:
border-color: color-value;
Default Value : The current color of the element
Property values: Where color-value can be any of the following:
- name: It specifies a color name, like “blue”.
- Hex: It specifies a hex value, like “#0000ff”.
- RGB: It specifies a RGB value, like “rgb(0, 0, 255)”.
- transparent: It sets the border color of the corresponding element to transparent.
The border-color property can be used to set individually using the following properties:
- CSS border-left-color Property: It is used to set the color of the left-border in an Element.
- CSS border-top-color Property: It can provide an option to fill different color from parent border-color to top border of the container.
- CSS border-right-color Property: It is used to set the color of the right-border in an Element.
- CSS border-bottom-color Property: It is used to set the color of the bottom border of an element.
- CSS border-block-color Property: It sed to set the individual logical block border-color property values in a single place in the style sheet.
- CSS border-inline-color Property: It is used to set the individual logical inline border-color property values in a single place in the style sheet.
We will understand each property value through the examples.
Set color-value by name: All the 140 valid CSS color names can be assigned to the border color.
Syntax:
border-color: blue;
Example: This example illustrates the border-color property by setting the color using the name value.
<!DOCTYPE html><html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: solid;
border-color: blue red yellow green;
}
p.three {
border-style: solid;
color: green;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
<p class="three">A solid inherited color border</p>
</body>
</html>
|
Output:
Set color-value by HEX: HEX color value can be assigned to the border color. The pair of values in #rrggbb represent RGB values in the hexadecimal system.
Syntax:
border-color: #0000ff;
Example: This example illustrates the border-color property by setting the color using the hexadecimal value.
<!DOCTYPE html><html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #0000ff #ff0000 #ffff00 #00ff00;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
|
Output:
Set color-value by RGB: RGB color value can be assigned to the border color. In rgb(r, g, b) values r, g, and b can vary from 0 to 255 for each of three.
Syntax:
border-color: rgb(0, 0, 255);
Example: This example illustrates the border-color property by setting the color using the RGB value.
<!DOCTYPE html><html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: rgb(0, 0, 255);
}
p.two {
border-style: solid;
border-color: rgb(0, 0, 255)
rgb(255, 0, 0)
rgb(255, 255, 0)
rgb(0, 255, 0);
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
|
Output:
Set color-value to transparent: Transparent value can be assigned to the border color. The transparent value effect is not observed as it lets pass the background color pass through it.
Syntax:
border-color: transparent;
Example: This example illustrates the border-color property by setting the color using the transparent value.
<!DOCTYPE html><html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: transparent;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A transparent border</p>
</body>
</html>
|
Output:
Notes: The border-color property may be defined by using one, two, three, or four values, as given below:
- If a single color value is assigned, it will set it to all sides.
- If two color values are assigned, the first color is set to the top and bottom sides and the second color will be set to the left & right sides.
- If three color values are assigned, the first color is set to the top, the second to the left and right, the third is set to the bottom.
- If four-color values are assigned, the colors are set to the top, right, bottom, and left, which follows the clockwise order.
Supported Browsers: The browsers supported by CSS | border-color Property are listed below:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0