CSS - border-left-color Property

Quiz

CSS border-left-color property specifies the left border color of an element. The border-left-style must be declared before using this property.

Syntax

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

Property Values

Value	Description
color	It specifies the color of border. Different color formats can be used (names,rgb values,hex values,hsl values etc.). Default color is the current color of the element.
transparent	It specifies that the border must be transparent.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border left Color Property

The following examples explain the border-left-color porperty with different values.

Border left Color Property with Color Names

The left border color can be set using color names (eg. red, blue etc). The specified color will be applied to the border. In the following example color names have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: red;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: green;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'red' border-left-color
    </h3>
    <p class="properties border">
        This border has 'green' border-left-color
    </p>
</body>

</html>

Border left Color Property with Hexadecimal Values

The left border color can be set using hexadecimal values (eg. #ff0000). The specified color will be applied to the border. In the following example hexadecimal values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: #ffaa00;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: #ff3333;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has '#ffaa00' border-left-color
    </h3>
    <p class="properties border">
        This border has '#ff3333' border-left-color
    </p>
</body>

</html>

Border left Color Property with RGB Values

The left border color can be set using rgb values (eg. rgb(255, 0, 0)). The specified color will be applied to the border. In the following example rgb values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: rgb(0, 0, 179);
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: rgb(0, 153, 77);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'rgb(0, 0, 179)' border-left-color
    </h3>
    <p class="properties border">
        This border has 'rgb(0, 153, 77)' border-left-color
    </p>
</body>

</html>

Border left Color Property with HSL Values

The left border color can be set using hsl values (eg. hsl(0, 100%, 50%)). The specified color will be applied to the border. In the following example hsl values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: hsl(180, 100%, 15%);
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: hsl(120, 50%, 40%);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'hsl(180, 100%, 15%)' border-left-color
    </h3>
    <p class="properties border">
        This border has 'hsl(120, 50%, 40%)' border-left-color
    </p>
</body>

</html>

Border left Color Property with Transparent Value

The set a transparent left border, we use the transparent value. In the following example transparent value has been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: transparent;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: transparent;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'transparent' border-left-color
    </h3>
    <p class="properties border">
        This border has 'transparent' border-left-color
    </p>
</body>

</html>

Supported Browsers

Property
border-left-color	1.0	4.0	1.0	3.5	1.0

css_reference.htm

Print Page