Propriedade outline do CSS

Definição e uso

A propriedade outline (contorno) é uma linha desenhada ao redor do elemento, localizada no exterior da borda, que pode destacar o elemento.

Notas:A linha de contorno não ocupa espaço e nem sempre é retangular.

A propriedade abreviada outline define todas as propriedades de contorno em uma declaração.

Os seguintes atributos podem ser definidos em ordem:

Se nenhuma dessas valores for definido, não haverá problema, por exemplo, outline:solid #ff0000; também é permitido.

Veja também:

Tutorial de CSS:Contorno CSS

Manual de referência do HTML DOM:Propriedade outline

Exemplo

Definir o estilo de 4 bordas:

p
  {
  outline:#00FF00 dotted thick;
  }

Experimente você mesmo

Sintaxe do CSS

outline: outline-width outline-style outline-color|initial|inherit;

Valor da propriedade

Valor Descrição
outline-color Define a cor da borda. Veja:outline-color valores possíveis.
outline-style Define o estilo da borda. Veja:outline-style valores possíveis.
outline-width Define a largura da borda. Veja:outline-width valores possíveis.
inherit Deve ser herdado a configuração da propriedade outline do elemento pai.

Detalhes técnicos

Valor padrão: invert none medium
Herança: não
Versão: CSS2
Sintaxe do JavaScript: object.style.outline="#0000FF dotted thin"

Exemplo TIY

Desenhar linha ao redor do elemento
Este exemplo demonstra como usar a propriedade outline para desenhar uma linha ao redor do elemento.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Notas:Se definido !DOCTYPE, o IE8 suporta a propriedade outline.