HTML | DOM Style borderLeftWidth Property

Last Updated : 14 Jul, 2022
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: html
    <!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-beforeAfter clicking the button: thin-after
  2. medium: This is used to define a medium left border. This is the default value. Example-2: html
    <!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-beforeAfter clicking the button: medium-after
  3. thick: This is used to define a thick left border. Example-3: html
    <!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-beforeAfter clicking the button: thick-after
  4. length: This is used to define the left border width in terms of length units. Example-4: html
    <!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-beforeAfter clicking the button: length-after
  5. initial: This is used to set this property to its default value. Example-5: html
    <!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-beforeAfter clicking the button: initial-after
  6. inherit: This inherits the property from its parent. Example-6: html
    <!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-beforeAfter 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
Comment
Article Tags:
Web Technologies
HTML
HTML-DOM

Explore