HTML DOM Style outlineOffset Property

The Style outlineOffset property in HTML DOM is used to set or return the outline offset and draw it beyond the border edge. Outlines do not take space, unlike borders. It returns a string that represents the outline-offset property of an element.

Syntax:

Return the outlineOffset property.

object.style.outlineOffset

Set the outlineOffset property.

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

Property values:

Property Value	Description
length	Define length in length unit.
initial	Define initial value which is default.
inherit	Inherit property from parent element.

Example: This example changes the Style outlineOffset property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Style outlineOffset Property</title>
 
    <style>
        body {
            text-align: center;
        }
 
        #content {
            margin: auto;
            border: 2px green;
            outline: coral solid 4px;
            width: 250px;
            height: 50px;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
 
    <h2>HTML DOM Style outlineOffset Property</h2>
 
    <p>
        For moving the outline border outside
        the border edge, <br>click on the
        "Change Outline Border" button:
    </p>
    <br><br>
 
    <div id="content">
        <div>A computer science portal for Beginner</div>
    </div><br><br>
 
    <button onClick="myBeginner()">
        Change Outline Border
    </button>
 
    <script>
        function myBeginner() {
            document.getElementById("content")
                .style.outlineOffset = "20px";
        }
    </script>
</body>
 
</html>

Output:

Supported Browsers:

Google Chrome 1
Edge 15
Firefox 1.5
Opera 9.5
Apple Safari 1.2

Tags:

#HTML-DOM #HTML-Property #Web Technologies

HTML | DOM Style paddingBottom Property

HTML | DOM Style paddingTop Property

HTML DOM Style outlineOffset Property

HTML

Contact Us