Propriedade CSS outline-offset
A propriedade CSS outline-offset define a largura do espaço entre o contorno e a borda de um elemento. Veja valores e exemplos.
A propriedade outline-offset especifica a quantidade de espaço entre o contorno de um elemento e sua borda. O espaço adicionado pelo outline-offset é sempre transparente, portanto o fundo da página (ou o que estiver atrás do elemento) aparece através da lacuna.
Esta página explica o que o outline-offset faz, como valores positivos e negativos se comportam, quando utilizá-lo e os pontos de atenção a observar.
Como os contornos diferem das bordas
O outline-offset só faz sentido quando você entende como os contornos funcionam, pois eles se comportam de forma muito diferente das bordas:
- Um contorno é desenhado fora da borda do elemento — por padrão, fica rente à borda.
- Um contorno não ocupa espaço no layout, portanto adicioná-lo ou deslocá-lo nunca move os elementos ao redor.
- Um contorno pode ser não retangular (por exemplo, envolve cada linha de um elemento inline de múltiplas linhas).
Como um contorno não afeta o layout, o outline-offset é uma forma segura de afastar o contorno do elemento (ou aproximá-lo) sem reorganizar a página. Esta propriedade é uma das propriedades CSS3.
Ela não faz parte da propriedade abreviada outline. Ao contrário de outline-style, outline-color e outline-width, o outline-offset deve sempre ser definido como sua própria declaração.
| Valor inicial | 0 |
|---|---|
| Aplicável a | Todos os elementos. |
| Herdado | Não. |
| Animável | Sim. A largura do espaço é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.outlineOffset = "20px"; |
Sintaxe
Sintaxe CSS do outline-offset
outline-offset: length | initial | inherit;Exemplo da propriedade outline-offset:
Exemplo de código CSS com outline-offset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
margin: 20px;
border: 2px dotted #000;
background-color: #8ebf42;
outline: 4px solid #666;
outline-offset: 10px;
}
</style>
</head>
<body>
<h2>Outline-offset property example</h2>
<div class="ex1">The outline-offset is 10px</div>
</body>
</html>Resultado
No exemplo acima, o espaço entre o contorno e a borda é de 10px, e o fundo da página aparece através dessa lacuna transparente.
Valores negativos
O outline-offset também aceita comprimentos negativos. Um deslocamento negativo puxa o contorno para dentro, fazendo com que ele seja desenhado sobre o preenchimento/conteúdo do elemento, em vez de ao redor dele:
outline-offset: -5px; /* outline moves 5px inside the border edge */Isso é útil quando você quer um anel de foco que fique dentro de um elemento com pouco espaço (por exemplo, um botão rente à borda de um contêiner) sem que o contorno seja cortado por um ancestral com overflow: hidden. Um deslocamento negativo maior que o elemento faz o contorno colapsar e desaparecer.
Quando usar
- Anéis de foco com espaçamento. Combine
:focus-visiblecom um pequeno deslocamento positivo para que o anel de foco do teclado não fique muito próximo ao elemento. Nunca remova o contorno completamente sem fornecer um substituto — ele é a principal indicação visual para usuários de teclado. - Efeitos decorativos de "borda dupla" sem adicionar um segundo elemento, já que a lacuna do deslocamento revela o fundo.
- Evitar anéis cortados dentro de contêineres com rolagem, usando um pequeno deslocamento negativo.
Valores
| Valor | Descrição |
|---|---|
| length | Espaço entre o contorno e a borda do elemento. Pode ser negativo para desenhar o contorno dentro da borda. O valor padrão é 0. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Pontos importantes a considerar
- O
outline-offsetnão é herdado — os elementos filhos não o recebem automaticamente. - Porcentagens não são permitidas; apenas unidades de
length(px,em,rem, etc.) funcionam. - O deslocamento só é renderizado quando um contorno está realmente visível, ou seja, quando outline-style não é
nonee a largura é maior que zero. - A lacuna é transparente — o
outline-offsetnão pode receber sua própria cor.