Javascript Reference - HTML DOM Style outlineOffset Property

The outlineOffset property gets and sets an outline offsets.

Browser Support


`outlineOffset`	Yes	No	Yes	Yes	Yes

Syntax

Return the outlineOffset property:

var v = object.style.outlineOffset

Set the outlineOffset property:

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

Property Values

Value	Description
length	Default to 0. Set the distance of the offset.
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the outline-offset property
CSS Version	CSS3

Example

The following code shows how to move the outline border 15 pixels outside the border edge.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  w  ww.  j  av  a 2s.  c o m-->
    margin: auto;
    border: 1px solid black;
    outline: coral solid 5px;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">hi</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.outlineOffset = "15px";
}
</script>
</body>
</html>

The code above is rendered as follows: