HTML | DOM Style border Property

The DOM Style border Property is used to sets or returns the style of an element’s border.We can set the different style of the border for individual sides(top, right, bottom, left). The border-style property can take multiple values for each side.

Syntax:

  • It is used to return the Style Property.
    object.style.borderStyle 
  • It is used to set the Style Property.
    object.style.borderStyle = value 
  • DOM border-style Property Values

    • none: No border is created and it is left plain
    • hidden: Just like None it doesnt show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value.
    • dotted: A series of dots are displayed in a line as the border.
    • solid: A single solid and bold line is used as a border.
    • dashed: A series of square dashed lines are used as border.
    • double: Two lines placed parallel to each other act as the border.
    • groove: Displays a 3D grooved border, it’s effect depends on border-color value.
    • ridge: Displays a 3D ridged border, it’s effect depends on border-color value.
    • inset: Displays a 3D inset border, it’s effect depends on border-color value.
    • outset: Displays a 3D outset border, it’s effect depends on border-color value.

    Return Value: It returns a string value which represent the style of an element’s border.

    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            h1 {
                color: green;
                font-size: 39px;
            }
              
            #GFG {
                border: thick solid coral;
                width: 70%;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksForGeeks</h1>
            <h2>DOM Style border Property.</h2>
            <div id="GFG">
                <p>GeeksForGeeks.</p>
                <p>A Computer Science Portal for geeks.</p>
            </div>
            <br>
            <button type="button" onclick="myGeeks()">Submit</button>
      
            <script>
                function myGeeks() {
                    
                    // Return the style property.
                    document.getElementById("GFG").style.borderStyle = 
                      "dashed dotted double solid";
                }
            </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before Clicking On Button: :

    After Clicking On Button:

    Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            h1 {
                color: green;
                font-size: 39px;
            }
              
            #GFG {
                width: 70%;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksForGeeks</h1>
            <h2>DOM Style border Property.</h2>
            <div id="GFG">
                <p>GeeksForGeeks.</p>
                <p>A Computer Science Portal for geeks.</p>
            </div>
            <br>
            
            <button type="button" onclick="myGeeks()">
              Submit
            </button>
      
            <script>
                function myGeeks() {
                    
                    // Return the dotted style border.
                    document.getElementById("GFG").style.borderStyle = 
                      "  dotted ";
                }
            </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before Clicking On Button:

    After Clicking On Button:

    Supported Browsers: The browser supported by DOM Style border Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    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.