Open In App

HTML | DOM Style borderWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 : 

HTML




<!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>Welcome 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 used 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. 

HTML




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

HTML




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

HTML




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

HTML




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

HTML




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


Output: 

Before Click on the button: 

After Click on the button: 

Supported Browsers: The browser supported by DOM borderWidth property are listed below: 

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


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