Skip to content
Related Articles

Related Articles

Improve Article
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>

    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
    My Personal Notes arrow_drop_up
Recommended Articles
Page :