outlineOffset Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:outlineOffset

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. outlineOffset

Description

The outlineOffset property offsets an outline.

Property Values

Value Description
length outline is outset from the border edge by length. Default value is 0
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the outline-offset property of an element
CSS VersionCSS3

Move the outline border 15 pixels outside the border edge:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from   www .  j  a  v a2s  .  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">
  <h1>Hello</h1>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.outlineOffset = "15px";
}
</script>

</body>
</html>

Related Tutorials