HTML | DOM Style borderWidth Property

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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.