The border-left property is a shorthand property used to specify the width, style and color of the left border of an element.
It is a shorthand property for the longhand properties: border-left-width, border-left-style and border-left-color properties of an element.
The border-left property can accept one, two or three arguments as a value—omitted values are set to their initial values.
Official Syntax
-
Syntax:
border-left: <line-width> || <line-style> || <color>
-
Initial:
0 none currentColor, which is the concatenation of the initial values of the long-hand properties. - Applies To: all elements
- Animatable: The width and color of the border are animatable.
Values
- <line-width>
-
The width of the left border. Refer to the
border-left-widthproperty entry for a list of possible values. - <line-style>
-
The style of the left border. Refer to the
border-left-styleproperty entry for a list of possible values. - <color>
-
The color of the left border. Refer to the
border-left-colorproperty entry for a list of possible values.
Examples
The following are all valid border-left values set on an element.
.element {
border-left: 1em; /* style and color are set to their initial values */
/* or */
border-left: dotted deepPink; /* width is set to its initial value (0), which means that no left border will be set */
/* or */
border-left: 1px dotted #eee;
/* or */
border-left: 10px solid #009966;
}
Browser Support
The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.
