outline-offset

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

/* 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

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

Html

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

El código anterior producirá este efecto:

Otro ejemplo:

outline: multiple offsets;

Especificaciones

Especificación	Estado	Comentarios
CSS Transitions La definición de 'outline-offset' en esta especificación.	Working Draft	Define `outline-offset` como propiedad que se puede animar.
CSS Basic User Interface Module Level 3 La definición de 'outline-offset' en esta especificación.	Recommendation	Definición inicial

Compatibilidad de navegadores

BCD tables only load in the browser