Manuales 
outline-offset m4b4h
The outline-offset property is used to set the offset of an element’s outline. g6l61
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 55184y
- Syntax:
outline-offset: <length> | inherit
- Initial: 0
- Applies To: all elements
- Animatable: yes, as a length
Values 584j31
- <length>
-
See the
<length>entry for a list of possible length values. - inherit
- The element inherits its outline offset value from its parent.
Examples 3e5p5z
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 2x4j2k
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 k5t66
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.