Propriedade CSS outline-color
A propriedade CSS outline-color define a cor do contorno de um elemento. Veja valores e exemplos.
A propriedade CSS outline-color define a cor do contorno de um elemento — a linha desenhada logo fora da borda.
Um contorno é semelhante a uma borda, mas com duas diferenças importantes:
- Não ocupa espaço. A largura e a altura de um elemento não incluem o contorno, portanto adicionar ou alterar um contorno nunca desloca o layout ao redor (ao contrário de uma borda, que faz parte do modelo de caixa).
- Não pode ter lados individuais. Um contorno envolve o elemento inteiro de uma vez; não é possível definir uma cor diferente apenas no topo ou na esquerda, como se pode fazer com border-color.
Como os contornos ficam fora da caixa e não provocam refluxo na página, eles são a forma padrão de indicar o foco por teclado. Quando o usuário navega com Tab por links, botões e campos de formulário, o navegador desenha um contorno de foco para que ele saiba onde está. Isso torna outline-color uma ferramenta de acessibilidade em primeiro lugar e decorativa em segundo — tenha cuidado antes de remover ou ocultar contornos de foco.
Por que usar outline-color
Você usará outline-color principalmente para:
- Estilizar estados de foco — dar a
:focusou:focus-visibleuma cor de contorno de alto contraste e alinhada à marca, em vez do padrão do navegador. - Destacar um elemento sem alterar seu tamanho ou deslocar seus vizinhos.
- Depurar layout — um contorno brilhante temporário mostra a extensão exata de um elemento sem afetar o modelo de caixa.
outline-color não tem efeito visível por si só. Um contorno só é renderizado quando também possui um estilo, portanto combine-o com o atalho outline ou com a propriedade outline-style (seu estilo padrão é none).
Valores de cor aceitos
Você pode definir a cor do contorno com qualquer cor CSS padrão: um nome de cor (red), um código hexadecimal (#1c87c9), ou as notações funcionais rgb(), rgba(), hsl() e hsla(). A palavra-chave currentColor também é útil — faz o contorno corresponder à cor do texto do elemento. Para a lista completa de formatos de cor, consulte a seção de cores HTML.
| Valor inicial | invert |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdada | Não. |
| Animável | Sim. A cor é animável. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.outlineColor = "#8ebf42"; |
Sintaxe
Sintaxe CSS outline-color
outline-color: invert | color | initial | inherit;Exemplo da propriedade outline-color:
Exemplo de código CSS outline-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p>Invert default value is applied.</p>
</body>
</html>Resultado
Exemplo da propriedade outline-color com cores hexadecimal, RGB, RGBA, HSL e HSLA:
Exemplo CSS outline-color com todos os valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-color: #1c87c9;
}
.p2 {
outline-style: solid;
outline-color: hsl(65, 100%, 50%);
}
.p3 {
outline-style: solid;
outline-color: hsla(84, 49%, 50%, 1);
}
.p4 {
outline-style: solid;
outline-color: rgb( 224, 0, 0);
}
.p5 {
outline-style: solid;
outline-color: rgba(204, 204, 204, 1);
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p class="p1">This is a paragraph with hexadecimal blue outline.</p>
<p class="p2">This is a paragraph with hsl yellow outline.</p>
<p class="p3">This is a paragraph with hsla green outline.</p>
<p class="p4">This is a paragraph with rgb red outline.</p>
<p class="p5">This is a paragraph with rgba grey outline.</p>
</body>
</html>Cada parágrafo mantém seu layout idêntico aos demais — apenas a cor do contorno muda — porque o contorno fica fora da caixa e não adiciona largura nem altura.
Exemplo de estilização de um contorno de foco:
O uso mais comum de outline-color no mundo real é tornar o foco do teclado visível e alinhado à marca. Aqui, um link recebe um contorno de foco azul espesso em vez do padrão do navegador:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:focus-visible {
outline-style: solid;
outline-width: 3px;
outline-color: #1c87c9;
outline-offset: 2px;
}
</style>
</head>
<body>
<h2>Focus outline example</h2>
<p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
<a href="#">Focus me with the keyboard</a>
</body>
</html>A propriedade outline-offset afasta o contorno alguns pixels do elemento para que não toque o texto. Use :focus-visible em vez de :focus para que o contorno apareça para usuários de teclado, mas não em cliques com o mouse.
Evite outline: none ou outline-color: transparent em elementos focalizáveis, a menos que substitua o indicador de foco por algo igualmente visível. Removê-lo torna a página inutilizável para usuários que dependem apenas do teclado.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| invert | Inverte qualquer cor aplicada ao fundo. Esse valor garante a visibilidade do contorno independentemente da cor de fundo. Este é o valor padrão da propriedade. | Experimente » |
| color | Define a cor do contorno. Podem ser usados nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla() ou a palavra-chave currentColor. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
outline-color é uma das três propriedades individuais que compõem o atalho outline:
- outline-style — define o estilo da linha (
solid,dashed,double, …). Obrigatório para que o contorno seja exibido. - outline-width — define a espessura da linha.
- outline-offset — define o espaço entre o contorno e a borda do elemento.
Escrever outline: 3px solid #1c87c9; é um atalho para definir largura, estilo e cor ao mesmo tempo.