The CSS 'border-left-color' property specifies the color of an element's left border. This property allows for the customization of the left border's color independently of the other borders, enabling more detailed and creative design choices for web elements.
CSS 'border-left-color' Property Examples
See the Pen CSS 'border-left-color' Property by Webzstore (@webzstore) on CodePen.
The 'border-left-color' property provides extensive control over the appearance of an element's left border, supporting the creation of detailed and visually appealing web designs.
Browser Support For 'border-left-color' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
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-color for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border-left-color' Property
border-left-color: color | initial | inherit;
Usage of the 'border-left-color' Property
Use 'border-left-color' to set or change the color of an element's left border. This is particularly useful for creating visual emphasis or distinction on one side of an element or for designs that require specific color coding or thematic border coloring.
Property Values of the 'border-left-color' Property
- Color: This field defines the color of the left border using standard CSS color values, such as named colors, HEX codes, RGB(a), and HSL(a).
- Initial: Resets the 'border-left-color' to its default value.
- Inherit: Inherits the 'border-left-color' from the parent element.



