CSS border-left-color Property
The border-left-color property specifies the color of the left border of an element.
The color of the left border with the colors of the right, top, and bottom borders, can be specified with the border-color shorthand property as well.
If you use the border-left-color property, you should first set the border-style or border-left-style properties and then change the color of the specified style.
The default width of a border is medium. You can define the width using either the border-width or border-left-width properties.
| Initial Value | currentColor |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No |
| Animatable | Yes. The color of the left border is animatedly. |
| Version | CSS1 |
| DOM Syntax | object.style.borderLeft = "1px solid black"; |
Syntax¶
border-left-color: color | transparent | initial | inherit;Example of the border-left-color property: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Consider another example where the value is set to transparent for the left border.
Example of the border-left-color property with the "transparent" value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>You can set hexadecimal, RGB, RGBA, HSL, HSLA, or color names as a value for the border-left-color property.
Example of the border-left-color property with a named color value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Example of the border-left-color property with a hexadecimal value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Example of the border-left-color property with an RGB value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Example of the border-left-color property with an HSL value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| color | Defines the color of the left border. The default color is the color of the current element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Required value. | |
| transparent | Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value. | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji