CSS 'border-left-width' Property Explained

The CSS 'border-left-width' property sets the width of an element's left border. This property allows for precise control over the thickness of the left border, enabling designers to create visually distinct boundaries or accents on one side of an element within a layout.

CSS 'border-left-width' Property Examples

See the Pen CSS 'border-left-width' Property by Webzstore (@webzstore) on CodePen.

The 'border-left-width' property offers significant flexibility in designing borders. It enables the integration of detailed graphical elements into the borders of web elements and enhances the visual appeal and thematic consistency of web designs.

Browser Support For 'border-left-width' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-left-width for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-left-width' Property

border-left-width: thin | medium | thick | length | initial | inherit;

Usage of the 'border-left-width' Property

Utilize 'border-left-width' to define or adjust the thickness of an element's left border. This property is beneficial for emphasizing a specific side of an element or for designs that require a varied border width to convey visual hierarchy or to draw attention to particular content areas.

Property Values of the 'border-left-width' Property

• Thin: This applies a thin width to the left border.
• Medium: Sets a medium thickness for the left border, the default value.
• Thick: Specifies a thick width for the left border.
• Length: Allows specifying the width with length units (e.g., px, em).
• Initial: Resets the 'border-left-width' to its default value.
• Inherit: Inherits the 'border-left-width' from the parent element.