Propriedade CSS outline-width
A propriedade CSS outline-width define a largura do contorno de um elemento. Veja os valores e exemplos da propriedade.
A propriedade outline-width define a espessura de um outline — a linha desenhada logo fora da borda de um elemento. Funciona de maneira similar ao border-width, mas com uma diferença importante: um outline não ocupa espaço no modelo de caixa, portanto, alterar o outline-width nunca desloca o layout dos elementos vizinhos.
Como o outline fica fora da borda e é excluído da caixa, a largura e a altura de um elemento não incluem o outline. É exatamente por isso que os outlines são a maneira padrão dos navegadores de indicar o foco do teclado — o anel de foco pode aparecer e desaparecer sem deslocar a página.
Esta propriedade aceita os seguintes valores: medium, thin, thick, um <length>, initial, inherit, revert e unset.
Quando usar outline-width
- Indicadores de foco. Quando você personaliza o anel de foco com as pseudo-classes
:focusou:focus-visible, ooutline-widthcontrola o quanto esse anel se destaca. Manter um outline de foco visível é importante para a acessibilidade — nunca o defina como0nem remova o outline sem fornecer outro estilo de foco visível. - Destaque sem refluxo. Como o outline fica fora da caixa, um outline mais espesso ao passar o mouse ou ao focar não empurrará os vizinhos da mesma forma que uma borda mais espessa faria.
- Depuração de layout. Um rápido
outline: 1px solid redé uma maneira popular de visualizar as caixas dos elementos sem afetar o tamanho deles.
outline-width só tem efeito quando outline-style está definido com um valor diferente de none (o padrão). Se o estilo for none, o outline não terá largura independentemente do que você definir aqui. O atalho outline define a largura, o estilo e a outline-color de uma só vez.
As três palavras-chave correspondem a espessuras definidas pelo navegador em vez de valores fixos em pixels, portanto podem diferir levemente entre os navegadores. Na prática, thin é aproximadamente 1px, medium (o padrão) é aproximadamente 3px e thick é aproximadamente 5px. Quando você precisa de um valor exato e previsível, use um <length> como 2px ou 0.2em.
Note que outline-width não aceita porcentagens nem valores negativos.
| Valor Inicial | medium |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Sim. A largura do outline é animável. |
| Versão | CSS2 |
| Sintaxe DOM | Object.style.outlineWidth = "thick"; |
Sintaxe
Sintaxe CSS do outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Exemplo com múltiplos valores
Exemplo de código CSS com outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Resultado
No exemplo a seguir, o primeiro elemento não tem borda e o segundo tem. Observe que o outline do segundo elemento é desenhado fora de sua borda, com um espaçamento que você pode ampliar usando outline-offset.
Outline com borda
Outro exemplo de código CSS com outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
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>Exemplo básico de outline
Exemplo da propriedade CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Combinando outline-width e outline-style
Exemplo da propriedade CSS outline-width com a propriedade outline-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| medium | Define um outline médio. Este é o valor padrão desta propriedade. | Experimente » |
| thin | Define um outline fino. | Experimente » |
| thick | Define um outline espesso. | Experimente » |
| length | Define a espessura do outline. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. | |
| revert | Reverte a propriedade para o valor definido pelo agente de usuário ou pela cascata anterior. | |
| unset | Redefine a propriedade para seu valor herdado ou inicial, dependendo da herança. |
Propriedades relacionadas
- outline — atalho para largura, estilo e cor em uma única declaração.
- outline-style — necessário para que a largura seja visível.
- outline-color — define a cor do outline.
- outline-offset — adiciona espaço entre o outline e a borda do elemento.
- border-width — a contraparte do modelo de caixa que afeta o layout.