Propriedade CSS outline-style
A propriedade CSS outline-style define o estilo do contorno de um elemento. Veja os valores e exemplos.
A propriedade CSS outline-style define o estilo de linha do contorno de um elemento — por exemplo, uma linha solid, dashed ou dotted. Um outline é uma linha desenhada logo fora da borda do elemento, ao redor dos quatro lados ao mesmo tempo.
Esta página explica como cada estilo de contorno se parece, como outline-style difere de border-style, e mostra exemplos executáveis para cada valor.
Por que usar um outline?
Os outlines são usados com mais frequência para tornar o foco visível. Quando um usuário navega com Tab até um link, botão ou campo de formulário pelo teclado, o navegador desenha um outline para que ele possa ver onde está. Remover esse outline sem uma substituição quebra a acessibilidade do teclado, portanto prefira reestilizá-lo em vez de excluí-lo.
O outline difere da border em dois aspectos importantes:
- Não ocupa espaço. O outline é desenhado fora da borda do elemento e não afeta o layout, portanto adicionar ou alterar um outline nunca desloca os elementos ao redor. A width e a height do elemento não incluem o outline.
- Não permite controle individual por lado ou canto. Ao contrário das bordas, não é possível definir um outline diferente em apenas um lado, e um outline básico segue o box, não o seu
border-radius.
Para que qualquer outline seja visível, outline-style deve ser definido com um valor diferente de none — esta propriedade é o que "ativa o outline". Combine-o com outline-color e outline-width, ou use o atalho outline para definir os três de uma vez.
A propriedade outline-style aceita os seguintes valores:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Os valores groove, ridge, inset e outset criam um efeito 3D sombreando o outline com base em outline-color. O efeito é mais visível com uma largura maior e uma cor de tom médio — é quase invisível em preto ou branco puro.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.outlineStyle = "dotted" |
Sintaxe
Sintaxe CSS de outline-style
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemplo da propriedade outline-style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
}
.p2 {
outline-style: dashed;
}
.p3 {
outline-style: dotted;
}
.p4 {
outline-style: double;
}
.p5 {
outline-style: none;/*hidden*/
}
.p6 {
outline-style: groove;
outline-color: #ccc;
}
.p7 {
outline-style: ridge;
outline-color: #ccc;
}
.p8 {
outline-style: inset;
outline-color: #ccc;
}
.p9 {
outline-style: outset;
outline-color: #ccc;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="p1">This is a paragraph with outline set to solid.</p>
<p class="p2">This is a paragraph with outline set to dashed.</p>
<p class="p3">This is a paragraph with outline set to dotted.</p>
<p class="p4">This is a paragraph with outline set to double.</p>
<p class="p5">This is a paragraph with outline set to none.</p>
<p class="p6">This is a paragraph with outline set to groove.</p>
<p class="p7">This is a paragraph with outline set to ridge.</p>
<p class="p8">This is a paragraph with outline set to inset.</p>
<p class="p9">This is a paragraph with outline set to outset.</p>
</body>
</html>Resultado
Exemplo da propriedade outline-style com todos os valores:
CSS outline-style another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: 4px dotted gray;
}
p.dashed {
outline: 0.2em dashed rgb(142, 191, 66);
}
p.solid {
outline: 4px solid #ccc;
}
p.double {
outline: 4px double #000;
}
p.groove {
outline: 4px groove #666;
}
p.ridge {
outline: thick ridge #1c87c9;
}
p.inset {
outline: medium inset #1c87c9;
}
p.outset {
outline: 4px outset #1c87c9;
}
</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>
<p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Este segundo exemplo usa o atalho outline para definir o estilo, a largura e a cor juntos — por exemplo outline: 4px dotted gray.
Exemplo da propriedade outline-style com o valor "groove":
Example of the outline-style property with the groove value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #7f7fa7;
text-align: center;
outline-width: 8px;
outline-style: groove;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to groove.</p>
</body>
</html>Exemplo da propriedade outline-style com o valor "ridge":
Example of the outline-style property with the ridge value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: ridge;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to ridge.</p>
</body>
</html>Exemplo da propriedade outline-style com o valor "inset":
Example of the outline-style property with the inset value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: inset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to inset.</p>
</body>
</html>Exemplo da propriedade outline-style com o valor "outset":
Example of the outline-style property with the outset value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: outset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to outset.</p>
</body>
</html>Exemplo da propriedade outline-style com o valor "dotted":
Example of the outline-style property with the dotted value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dotted;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dotted.</p>
</body>
</html>Exemplo da propriedade outline-style com o valor "dashed":
Example of the outline-style property with the dashed value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dashed;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dashed.</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Não exibe nenhum outline. Este é o valor padrão desta propriedade. | Play it » |
| hidden | Igual a none para outlines (o valor existe por consistência com border-style). | Play it » |
| dotted | O outline é especificado como uma série de pontos. | Play it » |
| dashed | O outline é especificado como uma série de traços. | Play it » |
| solid | O outline é especificado como linhas sólidas. | Play it » |
| double | O outline é especificado como linhas sólidas duplas. | Play it » |
| groove | Especifica um outline com ranhura 3D. | Play it » |
| ridge | Especifica um outline com relevo 3D. | Play it » |
| inset | Especifica um outline embutido. | Play it » |
| outset | Especifica um outline em relevo. | Play it » |
| initial | Define a propriedade com seu valor padrão. | Play it » |
| inherit | Herda a propriedade do seu elemento pai. |
Dicas e erros comuns
outline-stylesozinho pode ser invisível. Sem largura ou cor definidas, a largura padrão do outline émediume a cor écurrentColor, então normalmente ele aparece — mas se você definiroutline-width: 0ele não será exibido. Use o atalho outline para ser explícito.- Não remova outlines de foco.
outline: noneremove o anel de foco do teclado. Se o design exigir sua remoção, substitua-o por um outline personalizado ou por um estilo de foco combox-shadow, para que os usuários de teclado ainda possam ver o foco. - Use
outline-offsetpara dar espaço. Como o outline fica junto à borda por padrão, a propriedadeoutline-offseto empurra para fora (ou para dentro com um valor negativo) sem afetar o layout. - Outline vs. border. Use um outline quando precisar de um indicador que não altere o tamanho ou a posição do box; use uma border quando a linha fizer parte do layout do elemento.
Propriedades relacionadas
- outline — atalho para
outline-width,outline-styleeoutline-color. - outline-color — define a cor do outline.
- outline-width — define a espessura do outline.
- border — a contraparte do outline que ocupa espaço no layout.