HTML DOM Style border Property

The DOM Style border Property is used to sets or return the style of an element’s border. We can set the different styles 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 doesn’t 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 a border.
double: Two lines placed parallel to each other act as the border.
groove: Displays a 3D grooved border, its effect depends on border-color value.
ridge: Displays a 3D ridged border, its effect depends on border-color value.
inset: Displays a 3D inset border, its effect depends on border-color value.

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

Example 1: In this example, we will see the use DOM Style border Property

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            font-size: 39px;
        }
        #GFG {
            border: thick solid coral;
            width: 70%;
        }
    </style>
</head>
   
<body>
    <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:

Example 2: In this example, we will see the use DOM Style border Property

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            font-size: 39px;
        }
        #GFG {
            width: 70%;
        }
    </style>
</head>
   
<body>
    <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>