Propriedade Outline Offset
Última atualização: 2026-09-13
outline-offset Propriedade Outline Offset
A propriedade outline-offset controla a distância entre o outline (contorno) e a borda do elemento. Um valor positivo empurra o outline para fora, afastando-o do elemento; um valor negativo o puxa para dentro, deixando-o mais próximo ou mesmo dentro do elemento. Geralmente é usada junto com outline para refinar o efeito visual.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
outline-offset: <length>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | Tipo | Distância do deslocamento do outline |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline-offset | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Os offsets positivos são frequentemente usados em botões ou cartões para criar um espaço de respiro entre o outline de foco e o elemento, tornando-o visualmente mais claro.
❓ Perguntas Frequentes
QO outline-offset afeta o layout?
ANão. Assim como o outline, o outline-offset não ocupa espaço de layout e não afeta o tamanho do elemento nem o fluxo do documento. Mesmo um valor negativo que puxa o outline para dentro do elemento deixa a disposição do conteúdo intacta. Ele apenas altera a distância entre o outline e a borda — valor positivo empurra para fora, negativo puxa para dentro.
QO outline-offset aceita valores negativos?
ASim. Valores negativos puxam o outline para dentro, mesmo para dentro do elemento; por exemplo, outline-offset: -3px; faz o outline de foco colar na borda interna de um botão. Se o offset empurrar o outline para fora da viewport, o navegador não adiciona barras de rolagem; a parte que ficar fora dos limites é simplesmente recortada. Misturar offsets positivos e negativos cria ótimos estilos de foco tipo "inset".
QComo criar um efeito de traço duplo com outline e offset?
ACombine outline com border: uma border externa: 2px solid #333; e um outline interno: 2px solid #fff; outline-offset: -6px;. Como nenhum dos dois afeta o layout, as duas linhas se sobrepõem formando uma decoração de traço duplo, comumente usada em cartões, botões e molduras de imagem — mais limpa do que aninhar divs extras.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
