HTML | DOM Style outline Property

Last Updated : 08 Aug, 2022

The Style outline property in HTML DOM is used to set or return all outline properties in one declaration. This property draws a line around an element. It sets or returns the one or more border property in short form. The outline can be set the following properties:

outline-width
outline-style
outline-color

Syntax:

It returns the outline property.

object.style.outline

It is used to set the outline property.

object.style.outline = "width|style|color|initial|inherit"

Return Values: It returns a string value that represents the outline width, style and/or color of an element

Property Values:

width:It sets the outline width.
style:It sets the style of outline.
color:It sets the color of the outline.
Initial: It sets the DOM outline property to its default value.
Inherit: The element inherits its property from parent element.

Example 1: Add a thick solid blue outline around the div container.

HTML

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML DOM Style outline Property
    </title>
</head>

<body>
    <div id = "container">
        <h1>GeeksforGeeks</h1>
        
        <h2>DOM Style outline Property</h2>
    </div>

    <script>
        function myGeeks() {
            document.getElementById("container").style.outline
                    = "thick solid blue";
        }
        myGeeks();
    </script>
</body>

</html>

Output:

Example 2: Add a length dashed green outline around the div container.

HTML

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML DOM Style outline Property
    </title>
    <style>
    #container {
        border: 3px solid black;
        outline: 3px solid blue;
    }
    </style>
</head>

<body>
    <div id = "GFG">
        <h1>GeeksforGeeks</h1>
        
        <h2>DOM Style outline Property</h2>
    </div>
    
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    
    <!-- script to set outline style -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.outline
                    = "7px dashed green";
        }
    </script>
</body>

</html>