Deslocamento do Contorno CSS

Deslocamento do Contorno CSS

outline-offset A propriedade adiciona espaço entre o contorno do elemento e a borda. O espaço entre o elemento e seu contorno é transparente.

O exemplo a seguir especifica um contorno de 25px fora da margem da borda:

Este parágrafo tem um contorno de 25px fora da margem da borda.

Exemplo

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

Experimente você mesmo

O exemplo a seguir mostra que o espaço entre o elemento e seu contorno é transparente:

Este parágrafo tem uma contorno de 25px fora da margem da borda.

Exemplo

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

Experimente você mesmo

Todos os atributos de contorno CSS

Atributo Descrição
outline Atributo abreviado, define outline-width, outline-style e outline-color em uma declaração.
outline-color Definir a cor do contorno.
outline-offset Especificar o espaço entre o contorno e a margem ou borda do elemento.
outline-style Definir o estilo do contorno.
outline-width Definir a largura do contorno.