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

border-left

Definition

border-left is a shorthand property for setting the width, style, and color of the left border of an element all at once.

Examples

This will create a left border on the element with the class example that is 3 pixels wide, solid, and red in color.

.example {
  border-left: 3px solid red;
}

This will create a left border on the element with the class example that is 5 pixels wide, dotted, and blue in color.

.example {
  border-left: 5px dotted blue;
}

This will create a left border on the element with the class example that is 2 ems wide, double, and green in color.

.example {
  border-left: 2em double green;
}

Values

ValueDescription
width style colorSets the width, style, and color of the border. Width, style, and color can be any valid CSS value for those properties.
initialSets the border to its default value
inheritInherits the border properties from the parent element

Best Practices

  • Use the border-left shorthand property to set the width, style, and color of the left border all at once.
  • Use the initial value to set the border to its default value.
  • Use the inherit value if you want the element to inherit the border properties from its parent element.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes