CSSoutline-offset Property
Example
Specify a 4 pixels solid red outline 15 pixels outside the border edge:
div {
outline: 4px solid red;
outline-offset: 15px;
}
Try it Yourself »outline: 4px solid red;
outline-offset: 15px;
}
Definition and Usage
Theoutline-offset property adds space between the 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 aboutanimatableTry it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.outlineOffset="15px"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| outline-offset | 4.0 | 15.0 | 3.5 | 3.1 | 10.5 |
CSS Syntax
outline-offset:length|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| length | The distance the outline is outset from the border edge. Default value is 0 | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
CSS tutorial:CSS User Interface
HTML DOM reference:outlineOffset property
