text-decoration-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumo

A propriedade CSS text-decoration-style CSS define o estilo das linhas especificadas por text-decoration-line. O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando text-decoration-line.

Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como <del> ou <s>. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.

Initial valuesolid
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Computed valueas specified
Animation typediscrete

Syntax

css
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Valores

solid double dotted dashed wavy

É uma das seguintes palavras-chave:

Keyword Description Comment
solid Draws a single line
double Draws a double line
dotted Draws a dotted line
dashed Draws a dashed line
wavy Draws a wavy line
-moz-none Non-standard Do not draw a line Do not use : use text-decoration-line: none instead
inherit

É uma palavra-chave indicando a reutilizar o valor calculado sobre o elemento pai.

Syntax Formal

text-decoration-style = 
solid |
double |
dotted |
dashed |
wavy

Exemplo

css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
css
.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
html
<p class="example">This is how it looks.</p>

Especificações

Specification
CSS Text Decoration Module Level 3
# text-decoration-style-property

Browser compatíveis

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-style
wavy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.