Open In App

CSS border-left-color Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads