Propriété CSS text-decoration-style

La propriété text-decoration-style spécifie le style de la décoration de texte. Les styles peuvent être solid, dashed, dotted, double et wavy.

La propriété text-decoration-style fait partie des propriétés CSS3.

Valeur initiale	solid
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textDecorationStyle = "dotted";

Syntaxe

Valeurs CSS text-decoration-style

css

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

Exemple de la propriété text-decoration-style :

Exemple de text-decoration-style

html

<!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>

Try it Yourself »

Résultat

CSS text-decoration-style wavy

Exemple de la propriété text-decoration-style avec la valeur "wavy" :

Exemple de code text-decoration-style wavy

html

<!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>

Try it Yourself »

Exemple de la propriété text-decoration-style avec la valeur "dotted" :

Exemple de code text-decoration-style dotted

html

<!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>

Try it Yourself »

Exemple de la propriété text-decoration-style avec la valeur "dashed" :

Exemple de code text-decoration-style dashed

html

<!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>

Try it Yourself »

Exemple de la propriété text-decoration-style avec la valeur "double" :

Exemple de code text-decoration-style double

html

<!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>

Try it Yourself »

Exemple de la propriété text-decoration-style avec toutes les valeurs :

Exemple de toutes les valeurs de text-decoration-style

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description	Tester
solid	Définit une ligne unique. C'est la valeur par défaut de cette propriété.	Tester »
double	Définit une double ligne.	Tester »
dotted	Définit une ligne pointillée.	Tester »
dashed	Définit une ligne en tirets.	Tester »
wavy	Définit une ligne ondulée.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Propriété CSS text-decoration-style ​

Syntaxe ​

Exemple de la propriété text-decoration-style : ​

Résultat ​

Exemple de la propriété text-decoration-style avec la valeur "wavy" : ​

Exemple de la propriété text-decoration-style avec la valeur "dotted" : ​

Exemple de la propriété text-decoration-style avec la valeur "dashed" : ​

Exemple de la propriété text-decoration-style avec la valeur "double" : ​

Exemple de la propriété text-decoration-style avec toutes les valeurs : ​

Valeurs ​

Pratique ​

Propriété CSS text-decoration-style

Syntaxe

Exemple de la propriété text-decoration-style :

Résultat

Exemple de la propriété text-decoration-style avec la valeur "wavy" :

Exemple de la propriété text-decoration-style avec la valeur "dotted" :

Exemple de la propriété text-decoration-style avec la valeur "dashed" :

Exemple de la propriété text-decoration-style avec la valeur "double" :

Exemple de la propriété text-decoration-style avec toutes les valeurs :

Valeurs

Pratique