CSS Property outline-offset
outline-offset set the offset of the outline.
Summary
| Item | Value |
|---|---|
| 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>