HTML | DOM Style borderWidth Property

Last Updated : 30 Jul, 2019

The borderWidth property in HTML DOM is used to set or return the width of the border element.

Syntax:

It is used to set the border of width.
```
object.style.borderWidth = value
```
It returns the border width property.
```
object.style.borderWidth
```

Return Value: It returns the selected border element with the given style.

There are six different value of border-width property which are listed below:

thick: It sets the border width to thick.

Syntax:

document.getElementById("id_name").style.borderWidth = "thick";

Example :

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        div { 
            border: 1px solid green; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d1"> 
        <p>Welocme to GeeksforGeeks.!</p> 
        <p> 
          This tutorial is on  
          HTML | DOM Style borderWidth Property. 
        </p> 
    </div> 
    <br> 
    <input type="button" onclick="myFunction()" 
                         value="Click Me.!" /> 
  
    <script> 
        function myFunction() { 
            document.getElementById("d1").style.borderWidth  
                                                 = "thick"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before Click on the button:

After Click on the button:

length: It is use to set each side of the border-width to given length. The length can be set in terms of px, em, etc.

Syntax:

document.getElementById("id_name").style.borderWidth =
top_px right_px bottom_px left_px;

Example: This example set each side of the width of the border.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        div { 
            border-style: solid; 
            border: 1px solid green; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d1"> 
        <p>Welocme to GeeksforGeeks.!</p> 
        <p> 
          This tutorial is on  
          HTML | DOM Style borderWidth Property.  
        </p> 
    </div> 
    <br> 
    <input type="button" onclick="mainFunction()"
                         value="Click Me.!" /> 
    <script> 
        function mainFunction() { 
            document.getElementById("d1").style.borderWidth 
                                      = "1px 7px 15px 25px"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before Click on the button:

After Click on the button:

thin: It is used to set the border width to thin.

Syntax:

document.getElementById("id_name").style.borderWidth = "thin";

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        div { 
            border: 8px solid green; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d1"> 
        <p>Welocme to GeeksforGeeks.!</p> 
        <p> 
          This tutorial is on  
          HTML | DOM Style borderWidth Property. 
        </p> 
    </div> 
    <br> 
    <input type="button" onclick="myFunction()" 
                         value="Click Me.!" /> 
  
    <script> 
        function myFunction() { 
            document.getElementById("d1").style.borderWidth  
                                                  = "thin"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before Click on the button:

After Click on the button:

medium: It is used to change the border with to medium. It is the default value of border-width.

Syntax:

document.getElementById("id_name").style.borderWidth = "medium";

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        div { 
            border: 30px solid green; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d1"> 
        <p>Welocme to GeeksforGeeks.!</p> 
        <p> 
          This tutorial is on  
          HTML | DOM Style borderWidth Property. 
        </p> 
    </div> 
    <br> 
    <input type="button" onclick="myFunction()" 
                         value="Click Me.!" /> 
  
    <script> 
        function myFunction() { 
            document.getElementById("d1").style.borderWidth 
                                                = "medium"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before Click on the button:

After Click on the button:

inherit: It specifies that the border-width property inherited from its parent element.

Syntax:

document.getElementById("id_name").style.borderWidth = "inherit";

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        span { 
            color: blue; 
            border: 3px solid black; 
            padding: 3px; 
        } 
          
        .d1 span { 
            color: inherit; 
        } 
          
        div { 
            padding: 5px; 
            display: block; 
            margin: 6px; 
        } 
          
        .c2 { 
            width: 50%; 
            height: 40%; 
            padding: 20px; 
            border: 2px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="c2"> 
        <div> 
            This is first  
            <span>span element</span>. 
        </div> 
  
        <div class="d1" style="color:green"> 
            This is second  
          <span id="gfg">span element</span>. 
        </div> 
  
        <div style="color:red"> 
            This is third  
          <span>span element</span>. 
        </div> 
    </div> 
    <br> 
    <input type="button" onclick="myFunction()" 
                         value="Click Me.!" /> 
    <script> 
        function myFunction() { 
            document.getElementById("gfg").style.borderWidth  
                                                = "inherit"; 
        } 
    </script> 
</body> 
  
</html> 

Output:
Before Click on the button:

After Click on the button:

initial: It sets the borderWidth property to its default value.

Syntax:

document.getElementById("id_name").style.borderWidth = "initial";

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderWidth Property 
    </title> 
    <style> 
        div { 
            border: 10px solid; 
            border-color: green; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d1"> 
        <p>Welocme to GeeksforGeeks.!</p> 
        <p> 
          This tutorial is on  
          HTML | DOM Style borderWidth Property. </p> 
    </div> 
    <br> 
    <input type="button" onclick="myFunction()" 
                         value="Click Me.!" /> 
  
    <script> 
        function myFunction() { 
            document.getElementById("d1").style.borderWidth  
                                               = "initial"; 
        } 
    </script> 
  
</body> 
  
</html> 