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>