CSS - outline-offset

The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

Example

CSS

Copy Code

p {
  outline: dashed thin;
  /* Move the outline 10px away from the border */
  outline-offset: 10px;
  border:1px solid black;
}

Html

HTML

Copy Code

<p>outline: offset 10px. Border is solid and outline is dashed</p>

The code above produces this effect:

Another example:

outline: multiple offsets;

Syntax

CSS

Copy Code

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

Values

<length>: The width of the space. See <length> for possible units. Negative values place the outline inside the element.

Formal syntax

CSS

Copy Code

<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a>

Description

The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

Initial value	`0`
Applies to	all elements
Inherited	no
Media	visual, interactive
Computed value	as specified, but with relative lengths converted into absolute lengths
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

The space will be transparent (the parent will determine the background).

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'outline-offset' in that specification.	Working Draft	Defines `outline-offset` as animatable.
CSS Basic User Interface Module Level 3 The definition of 'outline-offset' in that specification.	Candidate Recommendation	Initial definition

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)	No support	9.5	1.2

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/outline-offset

CSS CSS Outline CSS Property NeedsLiveSample Reference