Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)

CSS 'border-left-color' Property Explained

Est. Reading: 1 minute
Posted: April 9, 2024

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

FirefoxSafariChromeMicrosoft EdgeOpera
1.01.01.04.03.5

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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at his company, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

chevron-down