CSS border-left property
CSS border-left property is used to specify left side border width, style, and color of a HTML Element.
CSS border-left property is a shorthand to specify border-left-width, border-left-style, and border-left-color as a single property.
The syntax to specify border-left is
border-left: border-left-width border-left-style border-left-color;
where
| Property | Mandatory/Optional | Examples |
|---|---|---|
| border-left-width | Optional | 1px, 2em |
| border-left-style | Mandatory | solid, dotted, double |
| border-left-color | Optional | #555, red, #55fffcdd |
Examples
border-left: 5px solid red;
In the following example, we set a border-left for <h1> element, with border-left-width of 5px, border-left-style of solid, and border-left-color of red.
index.html
border-left: 5px solid;
In the following example, we set a border-left for <h1> element, with border-left-width of 5px, and border-left-style of solid. We do not specify any value for border-left-color.
index.html
border-left: solid;
In the following example, we set a border-left for <h1> element, with border-left-style of solid. We do not specify any width and color for the border-left.
index.html
div border-left
In the following example, we set a border-left for <div> element, with border-left value of 5px solid #00F.
index.html
Conclusion
In this CSS Tutorial, we learned about border-left property, and how to use this property for HTML Elements, with examples.