CSS border-left-style Property Tutorial

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

Click here to run the example border-left-style property.

CSS border-left-style Property Definition and Usage

The border-left-style is a CSS property that we use to style the left border of an element.

CSS border-left-style Property Syntax

border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

CSS border-left-style Property Value

These are the values that we can use for the `border-left-style` property:

  • none (The default value);
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Also, the two global values “initial” and “inherit” could be used for this property.

Example: border-left-style property in CSS

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

How Does CSS border-left-style Property Work?

In this example, we’ve used the border-left-style to change the style of the left border of the element and set it to dotted style.

Leave a Reply