1. css
  2. /properties
  3. /border-left-style

border-left-style

Definition

border-left-style is a CSS property that sets the style of the left border of an element.

Examples

This will create a solid border on the left side of the element with the class example

.example {
  border-left-style: solid;
}

This will create a border on the left side of the element with the class example that is made up of a series of short lines

.example {
  border-left-style: dashed;
}

This will create a border on the left side of the element with the class example that is made up of two solid lines. The border will be twice as wide as a single solid border

.example {
  border-left-style: double;
}

Values

ValueDescription
noneNo border is drawn
hiddenSame as none, but has different usage
dottedBorder is a series of dots
dashedBorder is a series of short lines
solidBorder is a solid line
doubleBorder is two solid lines
groove3D groove is drawn
ridge3D ridge is drawn
inset3D inset is drawn
outset3D outset is drawn

Best Practices

  • Use the none value when you don't want to draw a border on the left side of an element.
  • Use the solid value for most border styles, as it is the most widely supported value.
  • Use the double value if you want a border that is double the width of a single solid border.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes