Skip to content
Related Articles

Related Articles

CSS | border-left-width Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!