The outline-offset property adds space between an outline and the edge or border of an element. Outlines differ from borders in two ways:
The following example uses the outline-offset property to add a 15px space between the border and the outline:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div {
border: margin: 20px; border: padding: 10px; border: width: 300px; border: height: 100px; border: 1px solid black; outline: 1px solid red; /* Move the outline 15px away from the border */ outline-offset: 15px; } </style> <body> <div>This div has an outline 15px outside the border edge.</div> </body> |
This div has an outline 15px outside the border edge.
|
Outline-offset works in Chrome, Firefox, Safari and Opera. Internet Explorer does not support the outline-offset property because it is considered deprecated.
