Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderWidth Property

  • Last Updated : 19 Aug, 2021

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
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :