Open In App

HTML | DOM Style borderLeftWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Style borderLeftWidth property is used to set or return the width of the left border of an element.

Syntax:

  • To get the borderLeftWidth Property
    object.style.borderLeftWidth
  • To set the borderLeftWidth Property
    object.style.borderLeftWidth = "thin | medium | thick | length |
    initial | inherit"

Return Values: It returns a string value, which representing the width of an element’s left border.

Property Values:

  1. thin: This is used to define a thin left border.

    Example-1:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <p class="elem">
            GeeksforGeeks is a computer science
          portal with a huge variety of well written and
          explained computer science and programming
          articles, quizzes and interview questions.
        </p>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = 'thin';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    thin-before

    After clicking the button:

    thin-after

  2. medium: This is used to define a medium left border. This is the default value.

    Example-2:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
                border-left-width: thin;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <p class="elem">
            GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer 
          science and programming articles, 
          quizzes and interview questions.
        </p>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = 'medium';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    medium-before

    After clicking the button:

    medium-after

  3. thick: This is used to define a thick left border.

    Example-3:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes 
          and interview questions.
        </p>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = 'thick';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    thick-before

    After clicking the button:

    thick-after

  4. length: This is used to define the left border width in terms of length units.

    Example-4:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science portal
          with a huge variety of well written and 
          explained computer science and programming
          articles, quizzes and interview questions.
        </p>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = '10px';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    length-before

    After clicking the button:

    length-after

  5. initial: This is used to set this property to its default value.

    Example-5:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
                border-left-width: 15px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <p class="elem">
            GeeksforGeeks is a computer science portal
          with a huge variety of well written and explained
          computer science and programming articles, quizzes
          and interview questions.
        </p>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = 'initial';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    initial-before

    After clicking the button:

    initial-after

  6. inherit: This inherits the property from its parent.

    Example-6:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderLeftWidth
        </title>
      
        <style>
            #parent {
                padding: 10px;
                border-style: solid;
                border-left-width: 15px;
            }
              
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderLeftWidth
        </b>
        <br>
        <br>
        <div id="parent">
            <p class="elem">
                GeeksforGeeks is a computer science
              portal with a huge variety of well
              written and explained computer science
              and programming articles, quizzes and
              interview questions.
            </p>
        </div>
        <br>
        <button onclick="changeWidth()">
          Change BorderLeftWidth
        </button>
      
        <!-- Script to change BorderLeftWidth -->
        <script>
            function changeWidth() {
                elem = document.querySelector('.elem');
                elem.style.borderLeftWidth = 'inherit';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    Before clicking the button:

    inherit-before

    After clicking the button:

    inherit-after

  7. Supported Browsers: The browser supported by borderLeftWidth property are listed below:

    • Google Chrome 1 and above
    • Edge 12 and above
    • Internet Explorer 4 and above
    • Firefox 1 and above
    • Opera 3.5 and above
    • Apple Safari 1 and above


    Last Updated : 14 Jul, 2022
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads