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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { background: #FAFAFA; border-left: 5px solid; border-left-color: #ab22ff; } </style> </head> <body> <h1>Hello World</h1> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { background: #FAFAFA; border-left: 5px solid; border-left-color: rgb(224, 143, 242); } </style> </head> <body> <h1>Hello World</h1> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { background: #FAFAFA; border-left: 5px solid; border-left-color: rgba(224, 143, 242, 0.5); } </style> </head> <body> <h1>Hello World</h1> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { background: #FAFAFA; border-left: 5px solid; border-left-color: hsl(98, 49%, 74%); } </style> </head> <body> <h1>Hello World</h1> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { background: #FAFAFA; border-left: 5px solid; border-left-color: hsla(98, 49%, 74%, 0.5); } </style> </head> <body> <h1>Hello World</h1> </body> </html>
border-left-color transparent
In the following example, we set border-left-color for <h1> elements with value of transparent
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-left: 5px solid; border-left-color: transparent; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
Conclusion
In this CSS Tutorial, we learned about border-left property, and how to use this property for HTML Elements, with examples.