Esboço - CSS-Tricks | CSS Almanac 2025

A outlinepropriedade em CSS desenha uma linha ao redor do exterior de um elemento. É semelhante à fronteira, exceto que:

Sempre gira em torno de todos os lados, você não pode especificar lados específicos
Não faz parte do modelo de caixa, então não afetará a posição do elemento ou elementos adjacentes (bom para depuração!)

Outros fatos menores incluem que ele não respeita o raio da borda (faz sentido, suponho, pois não é uma borda) e que nem sempre é retangular. Se o contorno contornar um elemento embutido com diferentes tamanhos de fonte, por exemplo, o Opera desenhará uma caixa escalonada ao redor de tudo.

É frequentemente usado por motivos de acessibilidade, para enfatizar um link quando tabulado sem afetar o posicionamento e de uma maneira diferente do foco.

a:focus ( outline: 1px dashed red; )

Forma abreviada

outline: ( || || ) | inherit

Leva as mesmas propriedades da borda, mas com “contorno-” ao invés.

A abreviatura acima poderia ter sido escrita:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Notas

Você não pode definir um contorno em apenas um (ou dois, ou três) lados de um elemento. Todos os lados apenas. Não existe tal coisa como outline-top, outline-right, outline-bottom, ou outline-leftque há com border.
Tente abrir o console em qualquer site e executá document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");-lo - você verá muito da estrutura dos sites dessa maneira.
outlineé usado para :focusestilos por padrão. Lembre-se de que, se alguma vez você remover outlineestilos, por exemplo a:focus ( outline: 0; ), será necessário adicioná-los de volta ao usar algum outro tipo de estilo visualmente distinto.