In this section, we will learn what the border-left property is and how to use it in CSS.

CSS border-left Property Definition and Usage

The border-left property is a shorthand property that focuses on the left border of an element and allows us to change the “width”, “style”, and “color” properties of this border all at one declaration.

Here’s the order from which we set values for the `border-left` property:

• border-width
• border-style
• border-color

CSS border-left Property Syntax

border-left: border-width border-style border-color|initial|inherit;

CSS border-left Property Value

As the syntax of this property shows, the border-left property takes three values:

• The first value is the one we set for the border-width property.
• The second value is the one we set for the border-style property.
• And the last value is the one we set for the border-color property.

Notes:

• We can use the two global values “initial” and “inherit” here as well.
• If you omit the color value in this property, the color of the border becomes the same as the font color of that element.

Example: border-left property in CSS

See the Pen border-left property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-left Property Work?

The border-left property is a way of styling the left border of an element. This means the other border sides won’t take effect from this property.