In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > outlineOffset

outlineOffset style property

Browser support:

Sets or retrieves the amount of space between the outline and the border or the edge of the element.

The outline is similar to the border of an element, but it is not part of the element's dimensions, and it is displayed around the margin of the element. Therefore the element's width and height properties do not contain the width of the outline.

Syntax:

object.outlineOffset;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: outline-offset

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

space in length

The space in length units. For the supported length units, see the length page.

Default: none.

Example HTML code 1:

This example illustrates the use of the outline-offset property:

<head>
    <style>
        .example {
            outline-width: 2px;
            outline-style: solid;
            outline-color: blue;
            border: 1px solid black;
            width: 200px;
        }
        .offset5px {
            outline-offset: 5px;
        }
        .offset20px {
            outline-offset: 20px;
        }
    </style>
</head>
<body>
    <div class="example offset5px">outline-offset: 5px</div>
    <br /><br /><br />
    <div class="example offset20px">outline-offset: 20px</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the outlineOffset property in JavaScript:

<head>
    <style>
        #myDiv {
            outline-width: 2px;
            outline-style: solid;
            outline-color: blue;
            outline-offset: 4px;
            border: 1px solid black;
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        function ChangeOutlineOffset (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var offset = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('outlineOffset' in div.style) {
                div.style.outlineOffset = offset + "px";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" >Change outline offset</div>

    <br /><br /><br />

    <select onchange="ChangeOutlineOffset (this);" size="8">
        <option />1
        <option />2
        <option selected="selected" />4
        <option />6
        <option />8
        <option />10
        <option />15
        <option />25
    </select>
</body>