W3docs
en
Log in

CSS border-left-color Property

The border-left-color property is used for defining the color of the left border of an element. See all property values with examples.

The border-left-color property specifies the color of the left border of an element.

The color of the left border with the colors of the right, top and bottom borders, can be specified with the border-color shorthand property as well.

If you use the border-left-color property, you should first set the border-style or border-left-style properties and then change the color of the specified style.

The default width of a border is medium. You can define the width using either the border-width or border-left-width properties.

Initial ValuecurrentColor
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableYes. The color of the left border is animatable.
VersionCSS1
DOM Syntaxobject.style.borderLeft = "1px solid black";

Syntax

Syntax of CSS border-left-color Property

border-left-color: color | transparent | initial | inherit;

Example of the border-left-color property:

Example of CSS border-left-color Property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-color example</h2>
    <div>Example for the border-left-color property with different left border color.</div>
  </body>
</html>
Try it Yourself »

Result

CSS border-left-color property

Consider another example where the value is set to transparent for the left border.

Example of the border-left-color property with the "transparent" value:

Example of CSS border-left-color Property with transparent value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding: 3px;
        text-align: center;
        border: 15px ridge #8ebf42;
        border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent left border</h2>
  </body>
</html>
Try it Yourself »
Info

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the border-left-color property.

Example of the border-left-color property with a named color value:

Example of CSS border-left-color Property with darkred value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a named color value.</div>
  </body>
</html>
Try it Yourself »

Example of the border-left-color property with a hexadecimal value:

Example of CSS border-left-color Property with hexadecimal value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a hexadecimal value.</div>
  </body>
</html>
Try it Yourself »

Example of the border-left-color property with a RGB value:

Example of CSS border-left-color Property with RGB value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a RGB value.</div>
  </body>
</html>
Try it Yourself »

Example of the border-left-color property with a HSL value:

Example of CSS border-left-color Property with HSL value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a HSL value.</div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
colorDefines the color of the left border. Default color is the color of the current element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Required value.Play it »
transparentApplies a transparent color to the left border. The left border will still take up the space defined by the border-width value.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What is correct about the 'border-left-color' property in CSS according to the information provided in the URL?