Propriedade de Contorno
Última atualização: 2026-09-13
outline Propriedade de Contorno
A propriedade outline desenha uma linha ao redor de um elemento, fora de sua borda, e é usada principalmente para indicar o estado em foco. Diferente de border, outline não ocupa espaço e não afeta o tamanho do elemento nem o layout da página. É um atalho que define a cor, o estilo e a largura do contorno de uma vez.
| Categoria | |
|---|---|
| Valor Inicial | medium none currentcolor |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
outline: <outline-color> || <outline-style> || <outline-width>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<outline-color> || <outline-style> || <outline-width> | Valor | Atalho do contorno (não ocupa espaço, usado para indicadores de foco) |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v9 |
| Suportado em todos os principais navegadores | |||||
Importante： O outline é comumente usado para indicadores de foco de acessibilidade. Evite outline: none para remover o estilo de foco padrão, a menos que você forneça uma alternativa igualmente clara.
❓ Perguntas Frequentes
QQuando devo usar outline em vez de border?
AUse border quando a linha participa do layout e faz parte do box model. Use outline para pistas visuais que não ocupam espaço, especialmente estados de foco por teclado. outline é desenhado fora da borda, não afeta o tamanho do elemento e pode ser afastado dele com outline-offset. Não remova os estilos de foco com outline: none — forneça uma alternativa personalizada clara.
QO outline pode ser arredondado?
ASim. Nos navegadores modernos (Chrome 94+, Firefox 88+, Safari 16.4+), outline segue o border-radius do próprio elemento e renderiza cantos arredondados; navegadores antigos o desenham quadrado. Se você precisar de controle preciso sobre o formato, simule-o com box-shadow, que suporta naturalmente cantos arredondados e também não ocupa espaço.
QComo criar um estilo de foco personalizado bonito para substituir o outline padrão?
AUse o atalho outline com outline-offset: outline: 2px solid #0078d4; outline-offset: 2px; deixa um pequeno espaço entre o contorno e o elemento. Nunca remova os indicadores de foco com outline: none — isso prejudica usuários de teclado. Se você o implementar com box-shadow, certifique-se de que o contraste é suficiente.
QQual é a diferença entre outline e box-shadow?
Aoutline é uma linha com estilo e largura que não ocupa espaço e segue os cantos arredondados do elemento em navegadores modernos. box-shadow falsifica um traço com desfoque e espalhamento (por exemplo box-shadow: 0 0 0 2px red;) e suporta múltiplas sombras, brilhos e sombras internas. Nenhum afeta o layout, mas box-shadow não consegue desenhar linhas tracejadas, então os estilos de foco costumam combinar ambos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
