Related Articles

Related Articles

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

thin: It specifies a thin left border.



  • Syntax:
    border-left-width:thin;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

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

  • Syntax:
    border-left-width:thick;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

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

  • Syntax:
    border-left-width: length;
    
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

initial: It sets the property to its default value.

  • Syntax:
    border-left-width:initial;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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 arrow_drop_up
Recommended Articles
Page :