Skip to content
Related Articles

Related Articles

HTML | DOM Style border Property
  • Last Updated : 29 Jul, 2019

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:






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

    Output:

    Before Clicking On Button: :

    After Clicking On Button:

    Example-2:




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

    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
  • Recommended Articles
    Page :