CSS border-left-color property
The border-left-color property in CSS is identified for setting the color of the left border of an element.
The color of the left border may also be set using shorthand properties such as border-left or border-color.
The border-left-color property is specified as a single value. Not specifying the border-style results in no border because the default value of border-left-style is none.
Syntax for border-left-color property:
Following is the syntax for the border-left-color property.
border-left-color: color|transparent|initial|inherit;
Example: CSS border-left-color property
Here in the example below, we are using the border-left-color property with different border styles, colors, and their different values. In this case, we have given the border-left-color value as red. This means that there will be a left border in red color without any style.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-color property in CSS</title>
<style type="text/css">
.mybox {
border: solid 0.3em skyblue;
border-left-color: red;
width: auto;
}
.redtext {
color: red;
}
</style>
</head>
<body>
<div class="mybox">
<p>This is a box with a border around it. Note which side of the box is <span class="redtext">red</span>.</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-left-color property
Here in the example below, we are using the border-left-color property with different border styles, colors, and their different values. In this case, we have given the border-left-color value using the border-left-color value as rgb (255, 0, 0). This means that there will be a left border in the specified color without any style.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-color property in CSS</title>
<style type="text/css">
.mybox {
border-left-style: double;
border-left-color: rgb(255, 0, 0);
width: auto;
}
.redtext {
color: red;
}
</style>
</head>
<body>
<div class="mybox">
<p>This is a box with a border around it. Note which side of the box is <span class="redtext">red</span>.</p>
</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-left-color property is currentcolor. This property is applicable to all elements and also to the ::first-letter. It is not an inherited property. The computed value for this property is the computed color. The animation type for this property is a color.
