CSS border-left-color Property

Last Updated : 23 Aug, 2024

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

CSS border-left-style Property

manaschhabra2

Improve

Article Tags :

CSS border-left-color Property

Similar Reads

Thank You!

What kind of Experience do you want to share?