HTML

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.

<!DOCTYPE html>
<html>
     
<head>
    <title>
        HTML DOM Style outline Property
    </title>
</head>
 
<body>
    <div id = "container">
        <h1>w3wiki</h1>
         
        <h2>DOM Style outline Property</h2>
    </div>
 
    <script>
        function myBeginner() {
            document.getElementById("container").style.outline
                    = "thick solid blue";
        }
        myBeginner();
    </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>w3wiki</h1>
         
        <h2>DOM Style outline Property</h2>
    </div>
     
    <button onclick = "myBeginner()">
        Click Here!
    </button>
     
    <!-- script to set outline style -->
    <script>
        function myBeginner() {
            document.getElementById("GFG").style.outline
                    = "7px dashed green";
        }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM Style outline property are listed below:

Google Chrome 1
Edge 12
Internet Explorer 8
Firefox 1.5
Opera 7
Safari 1.2

HTML | DOM Style outline Property

HTML

HTML

Contact Us