Contorno do CSS

Este elemento possui borda preta e contorno azul, com largura de 10px.

Contorno do CSS

O contorno é uma linha desenhada ao redor do elemento, fora da borda, para realçar o elemento.

O CSS possui as seguintes propriedades de contorno:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Atenção:Contorno comBordaDiferentes! A diferença está em: o contorno é desenhado fora da borda do elemento e pode sobrepor-se a outros conteúdos. Da mesma forma, o contorno também não faz parte do tamanho do elemento; a largura e a altura total do elemento não são afetadas pela largura da linha de contorno.

Estilos de contorno CSS

A propriedade outline-style especifica o estilo do contorno e pode ser configurada com os seguintes valores:

  • dotted - Define contorno pontilhado.
  • dashed - Define contorno tracejado.
  • solid - Define contorno sólido.
  • double - Define contorno duplo.
  • groove - Define contorno 3D cavada.
  • ridge - Define contorno 3D sulcada.
  • inset - Define contorno 3D concavo.
  • outset - Define contorno 3D convexo.
  • none - Define contorno ausente.
  • hidden - Define contorno oculto.

O exemplo a seguir mostra diferentes valores de outline-style:

Exemplo

Demonstra diferentes estilos de contorno:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Resultado:

Contorno de ponto.

Contorno de linha pontilhada.

Contorno de linha sólida.

Contorno de linha dupla.

Contorno afundado 3D. Este efeito depende do valor outline-color.

Contorno encaixado 3D. Este efeito depende do valor outline-color.

Contorno saliente 3D. Este efeito depende do valor outline-color.

Contorno afundado 3D. Este efeito depende do valor outline-color.

Experimente pessoalmente

Atenção:A menos que seja configurado outline-style Atributo, senão outras propriedades de contorno (que serão detalhadas no próximo capítulo) não terão qualquer efeito!