border-left

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 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 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;
}