outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Resumen

La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno outline y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.

Valor inicial	`0`
Applies to	all elements
Heredable	no
Valor calculado	as specified, but with relative lengths converted into absolute lengths
Animation type	a length

El espacio será transparente (el elemento padre determinará el fondo).

Sintaxis

css

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

/* Valores globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

Valores

<length>: La anchura del espacio. Ver <length> para unidades posibles. Valores negativos colocan el borde dentro del elemento.

Sintaxis formal

outline-offset = 
  <length>

Ejemplos

css

p {
  outline: dashed thin;
  /* Mueve el contorno 10px lejos del borde */
  outline-offset: 10px;
  border: 1px solid black;
}

Html

html

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

El código anterior producirá este efecto:

Otro ejemplo

<p>
  <span style="outline-offset: 1px; outline: green solid 3px;">
    <span style="outline-offset: 1px; outline: blue solid 3px;">
      outline: multiple offsets;
    </span>
  </span>
</p>

Especificaciones

Specification
CSS Basic User Interface Module Level 4 # outline-offset