CSS border-left-color property
CSS border-left-color property is used to specify the left border color for HTML Element(s).
The syntax to specify a value for border-left-color property is
border-left-color: value;
The following table gives the possible values that could be given to border-left-color property.
| Value | Description | Example |
|---|---|---|
| color | Any valid CSS color value. | border-left-color: red;border-left-color: #f00;border-left-color: #ff000088;border-left-color: rgb(25, 220, 85); |
| transparent | Sets left border color to transparent. | border-left-color: transparent; |
| initial | Sets left border color to default value. | border-left-color: initial; |
| inherit | Inherits left border color value from its parent element. | border-left-color: inherit; |
Note: Please note that there must be a style specified for border or left border, to apply this color.
Examples
In the following examples, we apply a color for left border using different types of allowed values for border-left-color property.
HEX Value for border-left-color
In the following example, we set border-left-color for <h1> elements with hex value of #ab22ff.
index.html
RGB Value for border-left-color
In the following example, we set border-left-color for <h1> elements with RGB color value of rgb(224, 143, 242).
index.html
RGBA Value for border-left-color
In the following example, we set border-left-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5).
index.html
HSL Value for border-left-color
In the following example, we set border-left-color for <h1> elements with HSL color value of hsl(98, 49%, 74%).
index.html
HSLA Value for border-left-color
In the following example, we set border-left-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5).
index.html
border-left-color: transparent;
In the following example, we set border-left-color for <h1> elements with value of transparent.
index.html
Conclusion
In this CSS Tutorial, we learned about border-left property, and how to use this property for HTML Elements, with examples.