outline-offset
Description
outline-offset set the offset of the outline.
| Item | Value |
|---|---|
| Initial value | 0 |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.outlineOffset="5px" |
Syntax and Property Values
outline-offset: length|inherit
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 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{<!--from ww w. j a va2 s . co 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>
The code above generates the following result.
