Propiedad outline-offset

La propiedad outline-offset establece el desplazamiento del contorno exterior - un borde que no ocupa espacio. Los valores de la propiedad pueden ser cualquier unidad de tamaño, excepto porcentajes. El valor por defecto es: 0. Un valor positivo desplaza el contorno hacia fuera del elemento, un valor negativo - hacia dentro.

Sintaxis

selector {
	outline-offset: valor;
}

Ejemplo . Valor positivo

El contorno se desplaza fuera del elemento (el elemento está resaltado con fondo):

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Ejemplo . Valor negativo

El contorno se encuentra dentro del elemento:

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Ejemplo . Valor negativo de outline + border

Se puede lograr este interesante efecto (presta atención al grosor del espacio blanco entre bordes, es de 10px, no de 14, ya que parte fue ocupada por el outline con su grosor de 4px):

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Ver también

propiedad outline-width,
que establece el grosor del contorno
propiedad outline-style,
que establece el estilo del contorno
propiedad outline-color,
que establece el color del contorno
propiedad outline,
que es la propiedad abreviada para contornos