Carregando...

Outline em CSS

Já sabe desenhar uma borda (border). Outline é uma ferramenta próxima com outro trabalho: desenha um anel fora da caixa da borda e — ao contrário do border — não ocupa espaço de layout. Os vizinhos não se movem quando adiciona um outline.

Outline versus border

Mantenha estas duas ferramentas separadas no seu mapa mental.

📊 Outline vs border

Característica Outline Border
Espaço de layout Não ocupa espaço; o tamanho da caixa fica igual Ocupa espaço; pode aumentar a caixa da borda
Lugar habitual Fora da aresta da borda Em volta do padding
Uso comum Anéis de foco, ênfase temporária Arestas permanentes de UI e molduras de cartão
No cálculo de tamanho do modelo de caixa Não Sim (com content-box por defeito)

Um outline simples

Estilo, espessura e cor funcionam muito como border — mas o anel fica do lado de fora.

Outline básico

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

Atalho outline

O trio familiar: espessura, estilo e cor. É preciso um estilo para o outline aparecer — só outline: 2px #000 não chega.

Atalho outline

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

Estilos comuns de outline

Solid, dashed e dotted são escolhas do dia a dia. outline: none remove o anel — use com cuidado (ver foco abaixo).

Amostras de estilo outline

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — afaste o anel

outline-offset move o outline para longe da aresta da borda sem mudar o tamanho de layout. Valores positivos empurram para fora; negativos puxam para dentro.

Outline com offset

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Mesmo aspeto, custo de layout diferente

Duas caixas podem parecer semelhantes, mas só o border muda quanto espaço o elemento ocupa.

Border cresce; outline não

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Ambos parecem fortes; .with-border ocupa mais largura de layout */

Hábito amigo do foco

Os browsers usam muitas vezes outline (ou um anel parecido) para o foco de teclado. Não ponha outline: none em tudo. Se restilizar o foco, forneça um anel substituto claro para quem usa teclado saber onde está.

Manter um anel de foco visível

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

Experimente você

  1. Dê a uma caixa com padding um border e um outline mais grosso — os vizinhos ficam.
  2. Alterne o estilo do outline entre solid, dashed e dotted.
  3. Adicione outline-offset: 8px e veja o anel flutuar para fora.
  4. Compare .with-border e .with-outline lado a lado — peso visual semelhante, largura de layout diferente.
  5. Estilize :focus-visible num botão em vez de remover outlines globalmente.

Erros comuns

  • Tratar outline como border ao calcular a largura de layout (outline não acrescenta tamanho)
  • Usar outline: none em todos os elementos sem substituto de foco
  • Esperar que o outline empurre os vizinhos (isso é papel de margin ou border)
  • Escrever espessura e cor sem estilo (solid / dashed / …)
  • Confundir outline com as camadas do modelo de caixa que acabou de aprender

Resumo

  • O outline desenha-se fora do border e não ocupa espaço de layout
  • O atalho usa espessura, estilo e cor — o estilo é necessário
  • outline-offset move o anel sem mudar o tamanho da caixa
  • Border para arestas permanentes; outline para foco e anéis temporários
  • Mantenha um outline de foco visível (ou um substituto equivalente) para teclado

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial