The outline-offset property is used to set the offset of an element’s outline.
An outline is a line that is drawn outside the borders of an element to make it stand out on the page. It is usually used for accessibility reasons, and can be used for decoration purposes. Refer to the outline property entry for more information about outlines, how they differ from borders, and more.
Normally, the outline would be drawn just at the border edge, without any space between them. The outline-offset property allows you add to space between the outline and the border of the element. The space between them is transparent, so it will be filled with whatever background that the element’s parent has.
In short, if the computed value of outline-offset is anything other than 0, then the outline is outset from the border edge by that amount.
The outline-offset property can not be specified as part of the shorthand outline property. It has to be set on its own.
Official Syntax
-
Syntax:
outline-offset: <length> | inherit
- Initial: 0
- Applies To: all elements
- Animatable: yes, as a length
Values
- <length>
-
See the
<length>entry for a list of possible length values. - inherit
- The element inherits its outline offset value from its parent.
Examples
The following adds a 2px-width purple outline to input fields when they are focused/tabbed. The width, color, and style of the outline are set using the outline-width, outline-color, and outline-style properties set in the shorthand outline property.
input[type="text"]:focus {
outline: 2px solid purple;
outline-offset: 1em;
}
Live Demo
The following demo sets the outline offset on boxes (<div>s) with a black border. Play with the values of the outline-offset to see how that changes the amount of space between the outline and the border of the element.
The outline of the second element overlaps the first element, since it is not part of the element’s box model, and causes no reflow on the page or overflow on the body. Refer to the outline property entry for more information about this.
Browser Support
The outline-offset property is supported in Chrome, Firefox, Safari, and Opera 9+. Support on Android and iOS is unknown.
The outline-offset property is not supported in Internet Explorer.
