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

cssseletor {
  outline-offset: valor;
}

Exemplo . Valor positivo

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

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

css#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:

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

css#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):

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

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

Результат:

Veja também