Open In App

CSS border-left-width Property

Improve
Improve
Like Article
Like
Save
Share
Report

The border-left-width Property is used to sets the width of the left-border of 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-width: medium|thin|thick|length|initial|inherit;

Property Values: medium: It has a default value. It is used to specify a medium, size of left-border.

Syntax:

border-left-width:medium;

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: medium;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:medium;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:medium;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
        
</body>
  
</html>


Output:

 

thin: It specifies a thin left border.

Syntax:

border-left-width:thin;

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: thin;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thin;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:thin;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>


Output: 

 

thick: It specifies a thick left border of an element.

Syntax:

border-left-width:thick;

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: thick;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thick;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:thick;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>


Output:

 

length: It specifies the thickness of the left-border in terms of pixel.

Syntax:

border-left-width: length;

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: 10px;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:length;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:5px;
                  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-width:initial;

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: initial;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:initial;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:initial;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>


Output:

 

Supported Browsers: The browser supported by CSS border-left-width 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