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

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