CSS outline-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 »
Definition and Usage
The outline-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 about animatable Try 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 about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS User Interface
HTML DOM reference: outlineOffset property
