CSS border-left-color Property

The border-left-color Property is used to set the color of the left-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-left-color property.

Syntax:

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

Property Values

color: It sets the color of the Element’s left-border.

Syntax:
```
border-left-color: color
```

Example:

html

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        CSS | border-left-color Property 

    </title> 

    <style> 

        h1 { 

            color: green; 

        } 

        h3 { 

            border: 2px solid green; 

            border-left-color: red; 

            width: 50%; 

        } 

    </style> 

</head> 

<body> 

    <center> 

        <h1>GeeksForGeeks</h1> 

        <h2>border-left-color:color;</h2> 

        <h3>GeeksForGeeks</h3> 

        <!-- Sets the color-->

        <p style="border-style:dotted;  

                  border-left-color:coral;  

                  width:70%;"> 

          It is a computer science portal for geeks.</p> 

</body> 

</html></li>

Output:

Transparent: It specify the transparent value of left-border.

Syntax:
```
border-left-color:transparent;
```

Example:

html

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        CSS | border-left-color Property 

    </title> 

    <style> 

        h1 { 

            color: green; 

        } 

        h3 { 

            border: 2px solid green; 

            border-left-color: transparent; 

            width: 50%; 

        } 

    </style> 

</head> 

<body> 

    <center> 

        <h1>GeeksForGeeks</h1> 

        <h2>border-left-color:transparent</h2> 

        <h3>GeeksForGeeks</h3> 

        <!-- Sets the color to transparent-->

        <p style="border-style:dotted; 

                  border-left-color:transparent; 

                  width:70%;"> 

          It is a computer science portal for geeks.</p> 

</body> 

</html>

Output:

initial: It sets the Property to its default value.

Syntax:
```
border-left-color:initial;
```

Example:

html

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        CSS | border-left-color Property 

    </title> 

    <style> 

        h1 { 

            color: green; 

        } 

        h3 { 

            border: 2px solid green; 

            border-left-color: initial; 

            width: 50%; 

        } 

    </style> 

</head> 

<body> 

    <center> 

        <h1>GeeksForGeeks</h1> 

        <h2>border-left-color:initial;</h2> 

        <h3>GeeksForGeeks</h3> 

        <!-- Sets the color to its default value-->

        <p style="border-style:dotted; 

                  border-left-color:initial; 

                  width:70%;"> 

          It is a computer science portal for geeks.</p> 

</body> 

</html>

Output :

Supported Browsers: The browser supported by css border-left-color property are listed below:

Google Chrome 1.0
Edge 12.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Apple Safari 1.0

Article Tags :

CSS

Web Technologies

CSS-Properties