This property is a shorthand that sets the left border’s properties.
This shorthand sets the border-left-color
, border-left-style
and border-left-width
properties.
/* Setting values can be done in any order
and any value can be omitted: */
border-left: thin solid blue;
border-left: #fafa33 dotted 3px;
border-left: dashed;
border-width
Same values apply as with the border-width
property. It can be thin
, medium
or thick
as a keyword value or any type of length value (example: 15px
or 1.3rem
).
border-style
Same values apply as with the border-style
property. It specifies the type of style for the line used for the inline borders. It can be solid
, none
, dotted
, dashed
, double
, inset
, hidden
, groove
, ridge
or outset
color
As with other types of color properties, any color type value is accepted.
initial
Global CSS keyword – this sets the property to the default value.
inherit
Global CSS keyword – this sets the property to be inherited from its parent element.
Have a code example of border-left
? Submit a codepen.io demo and we'll showcase it here ↴