CSS Property outline-offset








outline-offset set the offset of the outline.

Summary

ItemValue
Initial value 0
Inherited no
Version CSS3
JavaScript syntax object.style.outlineOffset="5px"

CSS Syntax

outline-offset: length|inherit




Property Values

The property values are listed in the following table.

Value Description
length Set the distance between outline and the border edge
inherit Inherit the outline-offset property from the parent element

Browser compatibility

outline-offset Yes 8.0 Yes Yes Yes

Example

An example showing how to use outline-offset CSS property.

<!DOCTYPE html>
<html>
<head>
<style> 
div{<!--from  ww w.jav a 2s .  c o m-->
    width:150px; 
    height:70px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:50px;
} 
</style>
</head>
<body>
   <div>This div has an outline border 50px outside the border edge.</div>
</body>
</html>

Click to view the demo