Specify a 4 pixels solid red outline 15 pixels outside the border edge:
div {
outline: 4px solid red;
outline-offset: 15px;
}
Definition and Usage
The outline-offset property adds space between an outline and the edge or border of an element.
The space between an element and its outline is transparent.
Outlines differ from borders in three ways:
- An outline is a line drawn around elements, outside the border edge
- An outline does not take up space
- An outline may be non-rectangular
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable – Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.outlineOffset=”15px” Try it |
CSS Syntax
outline-offset: length|initial|inherit;
Property Values
| Value | Description |
|---|---|
| length | The distance the outline is outset from the border edge. Default value is 0 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |