border-left

robgmerrill's avatar
robgmerrill's avatar
robgmerrill
Published Jun 28, 2021Updated Oct 24, 2023
Contribute to Docs

Shorthand property that defines the width, color, and style of the left border of an element.

Syntax

border-left: <value>;

By default, border-left will have a style of none and a width of medium. The default color is the value of the color property or text color.

<value> can be one of the following:

  • border-style changes the shape or design of the border to one of the 10 available styles.
  • border-width changes the thickness of the border.
  • border-color changes the border color.

Note: values can be provided in any order.

Example 1

Set the left border of the h1 element to be green, 3 pixels thick, and dotted:

h1 {
  width: fit-content;
  border-left: green 3px dotted;
}

Example 1

Example 2

Set the left border of the h1 element to be 3 pixels thick, dashed, and blue:

h1 {
  width: fit-content;
  border-left: 3px dashed #0000ff;
}

Example 2

Example 3

Set the right border of the h1 element to be solid and black. Since a width is not specified, it will default to medium.

h1 {
  width: fit-content;
  border-left: rgb(0, 0, 0) solid;
}

Example 3

All contributors

Contribute to Docs

Learn CSS on Codecademy