Propriedade CSS text-decoration-style - Sintaxe, Valores, Exemplos

A propriedade CSS text-decoration-style define o estilo de linha das decorações adicionadas por text-decoration-line — sublinhado, linha acima ou linha no meio. Os estilos disponíveis são solid, double, dotted, dashed e wavy.

Sozinha, essa propriedade não produz nenhum efeito visível: um estilo de linha só aparece quando há uma linha para estilizar. Por isso, quase sempre ela é usada em conjunto com text-decoration-line (ou com a abreviação text-decoration, que pode definir a linha, o estilo e a cor de uma só vez).

Esta página aborda a sintaxe, cada valor com um exemplo executável e onde cada estilo é mais útil.

Quando usar

wavy é a escolha não padrão mais comum — imita o sublinhado vermelho ondulado dos verificadores ortográficos, transmitindo a ideia de "isso precisa de atenção". Também é o visual usado pelos navegadores para erros de ortografia e gramática.
dotted e dashed criam um sublinhado mais suave e discreto do que uma linha sólida, útil para links menos enfatizados ou notas de rodapé.
double desenha duas linhas paralelas finas, útil em títulos ou para indicar algo mais forte do que um sublinhado normal.
solid é o valor padrão — só é necessário escrevê-lo para substituir um estilo herdado ou definido por abreviação.

Como a propriedade não é herdada e não é animável, defina-a no elemento cuja decoração você deseja estilizar; não é possível fazer transição entre estilos.

A propriedade text-decoration-style é uma das propriedades CSS3.

Valor Inicial	solid
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.textDecorationStyle = "dotted";

Sintaxe

Valores de CSS text-decoration-style

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Exemplo da propriedade text-decoration-style:

Exemplo de text-decoration-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade text-decoration-style com o valor "wavy":

Exemplo de código text-decoration-style wavy

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade text-decoration-style com o valor "dotted":

Exemplo de código text-decoration-style dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dotted;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade text-decoration-style com o valor "dashed":

Exemplo de código text-decoration-style dashed

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dashed;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade text-decoration-style com o valor "double":

Exemplo de código text-decoration-style double

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline underline;
        text-decoration-style: double;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade text-decoration-style com todos os valores:

Exemplo de text-decoration-style com todos os valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: overline underline;
        text-decoration-style: solid;
      }
      div.t2 {
        text-decoration-line: line-through;
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
      div.t4 {
        text-decoration-line: overline;
        text-decoration-style: dashed;
      }
      div.t5 {
        text-decoration-line: line-through;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
solid	Define uma linha simples. Este é o valor padrão desta propriedade.	Experimente »
double	Define linha dupla.	Experimente »
dotted	Define uma linha pontilhada.	Experimente »
dashed	Define uma linha tracejada.	Experimente »
wavy	Define uma linha ondulada.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Suporte dos navegadores

text-decoration-style é suportado em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). O estilo wavy, em particular, é renderizado de forma consistente em todos eles. Não é necessário prefixo de fornecedor nem fallback atualmente; em navegadores que não suportavam a propriedade, a decoração simplesmente recaía para uma linha sólida, portanto sempre degradou graciosamente.

Propriedades relacionadas

text-decoration-line — escolhe quais linhas aparecem (underline, overline, line-through).
text-decoration-color — define a cor da decoração.
text-decoration — a abreviação que define linha, estilo e cor em uma única declaração.

Prática

Qual dos seguintes é um valor válido para a propriedade 'text-decoration-style' em CSS?