HTML - DOM Style Object outlineOffset Property

Quiz

HTML DOM Style Object outlineOffset property sets or returns outline offset and draw it beyond the border edge.

Syntax

Set the outlineOffset property:

object.style.outlineOffset= "length | initial | inherit";

Get the outlineOffset property:

object.style.outlineOffset;

Property Values

Value	Description
length	It specifies distance between border and outline.
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 value which represents outline offset property of an element.

Example of HTML DOM Style Object 'outlineOffset' Property

The following example sets an outline offset of 10px to div element.

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

Supported Browsers

Property
outlineOffset	Yes 1	Yes 15	Yes 1.5	Yes 1.2	Yes 9.5

html_dom.htm

Print Page