Tutorials

CSS 'border-left-color' Property Explained

  • Published
  • 1 min read
  • CSS
  • HTML
  • Web Design
CSS 'border-left-color' Property
In this article
  1. CSS 'border-left-color' Property Examples
  2. Browser Support For 'border-left-color' Property
  3. CSS Syntax of the 'border-left-color' Property
  4. Usage of the 'border-left-color' Property
  5. Property Values of the 'border-left-color' Property

Corrected . The browser-support table was rebuilt from MDN browser-compat-data (unprefixed support, desktop browsers), checked 3 October 2026. Editorial approval is still pending.

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

Unprefixed support for the border-left-color property (selected supported implementation, desktop browsers)
BrowserVersionReleased
Chrome1Dec 2008
Edge12Jul 2015
Firefox1Nov 2004
Safari1Jun 2003
Opera3.5Nov 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.

Share this article

Written by

Webzstore Team

Webzstore has helped businesses since 2010. Today, we bring websites, digital marketing and enquiry follow-up into practical plans built around the work each business needs.

Related services

Talk about your website or marketing

Book a Free 30-Minute Call

More tutorials

All tutorials

Privacy choices

Choose what this website may load. Your choice is saved on this device for up to 180 days. Privacy Policy

Turning a choice off stops further use of that optional service on this site. It does not take back information already sent, and we cannot delete cookies that other services set in your browser.