CSS | border-left-width Property

Last Updated : 07 Aug, 2019

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:

<!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:

<!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:

<!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:

<!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:

<!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
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Apple Safari 1.0

My Personal Notes

Related Articles