Manuales 
outline-offset 4a6m2u
The outline-offset property is used to set the offset of an element’s outline. 383m4
An outline is a line that is drawn outside 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 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 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 3xs5l
- Syntax:
outline-offset: <length> | inherit
- Initial: 0
- Applies To: all elements
- Animatable: yes, as a length
Values u704t
- <length>
-
See the
<length>entry for a list of possible length values. - inherit
- The element inherits its outline offset value from its parent.
Examples 2h2053
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 property.
input[type="text"]:focus {
outline: 2px solid purple;
outline-offset: 1em;
}
Live Demo 6b4m17
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 572e63
The outline-offset property is ed in Chrome, Firefox, Safari, and Opera 9+. on Android and iOS is unknown.
The outline-offset property is not ed in Internet Explorer.