CSS Border-Left

The border-left CSS property sets the style, width, and color of the left border of an element.

Syntax

border-left: [width] [style] [color];

• width: Specifies the width of the border, which can be a number (in pixels) or a keyword, such as thin, medium, or thick.
• style: Specifies the style of the border, which can be a keyword, such as dashed, dotted, solid, or none, or a custom value, such as double, groove, ridge, or inset.
• color: Specifies the color of the border, which can be a keyword, such as red, green, blue, or transparent, or a custom value, such as #RRGGBB, rgb(R,G,B), or rgba(R,G,B,A).

Examples

Example 1: Basic Usage

div {
  border-left: 2px solid blue;
}

This example specifies a blue solid border, 2 pixels wide, on the left side of a <div> element.

Example 2: Shorthand

div {
  border: 2px dotted red;
  border-left: 4px solid blue;
}

This example specifies a red dotted border, 2 pixels wide, on all four sides of a <div> element, and then overrides the left border with a blue solid border, 4 pixels wide.

Example 3: Multiple Borders

div {
  border: 2px solid red;
  border-left: none;
  border-right: none;
}

This example specifies a red solid border, 2 pixels wide, on all four sides of a <div> element, and then removes the left and right borders, leaving only the top and bottom borders visible.

Example 4: Border Images

div {
  border-image: url(border.png) 30 30 stretch;
  border-left: none;
  border-right: none;
}

This example specifies a border image for all four sides of a <div> element, and then removes the left and right borders, leaving only the top and bottom borders visible.

Browser Compatibility

The border-left CSS property is supported by all modern web browsers.

Conclusion

The border-left CSS property is a powerful tool for creating custom borders on HTML elements. By combining different values for width, style, and color, you can create a wide range of border styles, from simple solid lines to complex images. So go ahead and experiment with border-left and see what kind of creative designs you can come up with!