HTML - DOM Style Object outline Property

Quiz

HTML DOM Style Object outline property is a shorthand property which sets or returns following three outline properties:

outline-width
outline-style
outline-color

The Outline draws a line around element but is different from border as border is a part of box model and it takes up space while outline does not as it's not part of the box model.

Syntax

Set the outline property:

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

Get the outline property:

object.style.outline;

Property Values

Value	Description
width	It specifies outline width.
style	It specifies outline style.
color	It specifies outline color.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string which represents outline width, style and/or color of an element.

Examples of HTML DOM Style Object 'outline' Property

The following examples illustrates how to add and change the outline of an element.

Add Outline to div Element

The following example adds an outline to div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outline Property
    </title>
    <style>
        #outline {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add outline</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outline = "4px solid #04af2f";
        }
    </script>
</body>
</html>

Change Outline of div Element

The following example changes the existing outline on div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outline Property
    </title>
    <style>
        #outline {
            border: 2px solid black;
            outline: 4px dotted yellowgreen;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add outline</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outline = "4px solid #04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property
outline	Yes 94	Yes 94	Yes 88	Yes 16.4	Yes 80

html_dom.htm

Print Page