CSS border-color Property
The border-color property in CSS is used to set the color of an element’s border. It only works when the border-style property is defined, as border-color alone does not render a visible border. The property can accept one to four values, corresponding to the top, right, bottom, and left borders, respectively. If not explicitly set, the border color inherits the element’s color.
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.
Individual Border Color Properties
The border-color property can be set individually using the following properties:
- CSS border-left-color Property: Sets the color of the left border.
- CSS border-top-color Property: Sets the color of the top border.
- CSS border-right-color Property: Sets the color of the right border.
- CSS border-bottom-color Property: Sets the color of the bottom border.
- CSS border-block-color Property: Sets the individual logical block border color values in a single declaration.
- CSS border-inline-color Property: Sets the individual logical inline border color values in a single declaration.
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">w3wiki</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">w3wiki</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">w3wiki</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">w3wiki</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.
The border-color property is a versatile CSS property used to define the color of an element’s border. By setting this property, along with border-style, developers can enhance the visual presentation of elements. Understanding the various ways to specify color values and how to apply them to individual borders allows for greater design flexibility.
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
Contact Us