w3docs logo

Propriété CSS text-decoration-style

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

Valeur initiale solid
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.textDecorationStyle = "dotted";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-style</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Un exemple avec la valeur "wavy":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-style</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Un exemple avec la valeur "dotted" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: overline;
      text-decoration-style: dotted;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-style</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Un exemple avec la valeur "dashed" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: overline;
      text-decoration-style: dashed;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-style</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Un exemple avec la valeur "double":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-style </h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Voyons un exempe, dans lequel toutes les valeurs de text-decoration-style sont comprises:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      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>Exemple de la propriété text-decoration-style</h2>
    <div class="t1">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <br>
    <div class="t2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <br>
    <div class="t3">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <br>
    <div class="t4">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <br>
    <div class="t5">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Valeurs

Valeur Description
solid Définit une seule ligne. C'est la valeur initiale de cette propriété.
double Définit une double ligne.
dotted Définit une ligne de points.
dashed Définit une ligne de tirets.
wavy Définit une ligne ondulée.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome edge firefox safari opera
57.0+ ✕ 36.0+ 12.1+ 44.0+

Pratiquez vos connaissances

Quelles valeurs peuvent être utilisées avec la propriété 'text-decoration-style' en CSS ?
Trouvez-vous cela utile?