Propriedade CSS outline
A propriedade CSS outline é um atalho para outline-width, outline-style e outline-color. Veja valores e exemplos.
Um outline é uma linha desenhada ao redor de um elemento, logo fora da borda. Ao contrário de uma borda, um outline não ocupa espaço no layout e é igual nos quatro lados — não é possível defini-lo por lado. Esta página aborda o atalho outline, como ele difere de uma borda e por que é importante para a acessibilidade via teclado.
A propriedade outline é um atalho que define as seguintes propriedades individuais em uma única declaração:
- outline-width — a espessura da linha.
- outline-style — o estilo da linha (
solid,dashed,dotted, …). Obrigatório para que o outline apareça. - outline-color — a cor da linha.
- outline-offset — o espaço entre o outline e a borda. (Definido separadamente; não faz parte do atalho
outline.)
O estilo de outline padrão é none, portanto definir apenas outline-color não tem efeito — é necessário também especificar um estilo. Como os outlines são pintados fora do elemento e ignorados pelo modelo de caixa, eles nunca deslocam o conteúdo adjacente nem alteram as dimensões de layout do elemento.
Outlines vs. Bordas
Um outline e uma borda parecem iguais, mas se comportam de forma diferente:
- Layout: uma borda faz parte do modelo de caixa e empurra o conteúdo vizinho; um outline é pintado por cima e não ocupa espaço.
- Lados: as bordas podem ter estilo por lado (
border-top,border-left, …); um outline é sempre uniforme nos quatro lados. - Forma: na maioria dos navegadores, um outline é estritamente retangular e não é arredondado por border-radius, mesmo quando a borda é.
- Posição: o outline é desenhado fora da borda, portanto, quando um elemento tem ambos, o outline fica além da borda.
| Valor Inicial | medium none currentcolor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. O outline do elemento é animável. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.outline = "#eee dashed 10px"; |
Sintaxe
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Exemplo da propriedade outline:
Exemplo de código CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Resultado
No exemplo acima, o outline-style do primeiro elemento é dotted e o do segundo elemento é dashed.
No exemplo a seguir, o primeiro elemento não tem borda e o segundo tem. Observe que o outline do segundo elemento está fora da sua borda:
Exemplo da propriedade outline com um elemento que possui borda:
CSS outline e borda juntos, exemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>No exemplo a seguir, o outline está fora da borda do segundo elemento.
Exemplo da propriedade outline-color com a propriedade outline-style:
Exemplo de código CSS outline com cor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Espaçando o outline com outline-offset
Por padrão, o outline fica colado à borda. A propriedade outline-offset afasta-o (ou, com valor negativo, puxa-o para dentro). É uma propriedade separada, não parte do atalho outline:
button {
outline: 2px solid #1c87c9;
outline-offset: 4px; /* 4px gap between the border and the outline */
}Outlines e acessibilidade via teclado
O uso mais importante dos outlines na prática é o indicador de foco. Quando um usuário navega pela página com a tecla Tab, o navegador desenha um outline padrão ao redor do elemento em foco para que ele saiba onde está. Removê-lo sem uma alternativa é um sério problema de acessibilidade:
/* Do NOT do this — keyboard users lose track of focus */
button:focus {
outline: none;
}Se o anel de foco padrão conflita com o seu design, reestilize-o em vez de removê-lo:
button:focus-visible {
outline: 2px solid #1c87c9;
outline-offset: 2px;
}Isso usa o estado :focus junto com a pseudo-classe moderna :focus-visible, que mostra o outline apenas para interação via teclado — assim, cliques com o mouse não acionam um anel enquanto usuários de teclado permanecem orientados.
Valores
| Valor | Descrição |
|---|---|
| outline-width | Define a largura do outline. |
| outline-style | Define o estilo do outline. |
| outline-color | Define a cor do outline. |
| outline-offset | Desloca o outline em relação à borda. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- outline-style — o componente de estilo obrigatório do atalho.
- outline-width — controla a espessura do outline.
- outline-color — controla a cor do outline.
- outline-offset — afasta o outline da borda.
- border — o equivalente no modelo de caixa que afeta o layout.