Propriedade outline

A propriedade outline define a cor, o tipo e a espessura do contorno externo (borda que não ocupa espaço) para todos os lados simultaneamente, mas, ao contrário do border, essa borda não expande o elemento. É uma propriedade abreviada para outline-width, outline-style e outline-color (mas não para outline-offset).

Sintaxe

cssseletor {
  outline: espessura tipo cor;
}

A ordem das propriedades não importa.

Exemplo . Apenas outline

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

css#elem {
  outline: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplo . Propriedades outline e border juntas

A borda do outline ficará por fora, e a borda do border - por dentro:

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

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

Результат:

Veja também