Propriedade outline-offset

A propriedade outline-offset define o deslocamento do contorno externo - uma borda que não ocupa espaço. Os valores da propriedade são quaisquer unidades de tamanho, exceto porcentagens. O valor padrão é: 0. Um valor positivo desloca o contorno para fora do elemento, um valor negativo - para dentro.

Sintaxe

seletor {
	outline-offset: valor;
}

Exemplo . Valor positivo

O contorno afasta-se do elemento (ele está destacado com fundo):

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

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

Exemplo . Valor negativo

O contorno fica dentro do 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;
}

Exemplo . Valor negativo outline + border

Você pode criar este efeito interessante (preste atenção na espessura do espaço branco entre as bordas, ele é 10px, e não 14, pois parte foi consumida pelo outline com sua espessura de 4px):

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

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

Veja também

a propriedade outline-width,
que define a espessura do contorno
a propriedade outline-style,
que define o estilo do contorno
a propriedade outline-color,
que define a cor do contorno
a propriedade outline,
que é a propriedade abreviada para contornos