CSS border-left-color property

CSS border-left-color property is used to specify the left border color for HTML Element(s).

The syntax to specify a value for border-left-color property is

border-left-color: value;

The following table gives the possible values that could be given to border-left-color property.

Value Description Example
color Any valid CSS color value. border-left-color: red;border-left-color: #f00;border-left-color: #ff000088;border-left-color: rgb(25, 220, 85);
transparent Sets left border color to transparent. border-left-color: transparent;
initial Sets left border color to default value. border-left-color: initial;
inherit Inherits left border color value from its parent element. border-left-color: inherit;

Note: Please note that there must be a style specified for border or left border, to apply this color.

Examples

In the following examples, we apply a color for left border using different types of allowed values for border-left-color property.

HEX Value for border-left-color

In the following example, we set border-left-color for <h1> elements with hex value of #ab22ff.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            background: #FAFAFA;
            border-left: 5px solid;
            border-left-color: #ab22ff;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGB Value for border-left-color

In the following example, we set border-left-color for <h1> elements with RGB color value of rgb(224, 143, 242).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            background: #FAFAFA;
            border-left: 5px solid;
            border-left-color: rgb(224, 143, 242);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGBA Value for border-left-color

In the following example, we set border-left-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            background: #FAFAFA;
            border-left: 5px solid;
            border-left-color: rgba(224, 143, 242, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSL Value for border-left-color

In the following example, we set border-left-color for <h1> elements with HSL color value of hsl(98, 49%, 74%).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            background: #FAFAFA;
            border-left: 5px solid;
            border-left-color: hsl(98, 49%, 74%);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSLA Value for border-left-color

In the following example, we set border-left-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            background: #FAFAFA;
            border-left: 5px solid;
            border-left-color: hsla(98, 49%, 74%, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-left-color transparent

In the following example, we set border-left-color for <h1> elements with value of transparent.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-left: 5px solid;
            border-left-color: transparent;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-left property, and how to use this property for HTML Elements, with examples.