Propriété CSS text-decoration-style - Syntaxe, valeurs, exemples

La propriété CSS text-decoration-style définit le style de ligne des décorations ajoutées par text-decoration-line — le soulignement, le surlignement ou le texte barré. Les styles disponibles sont solid, double, dotted, dashed et wavy.

Seule, cette propriété n'a aucun effet visible : un style de ligne ne s'affiche que lorsqu'il y a une ligne à styliser. Vous la combinez donc presque toujours avec text-decoration-line (ou le raccourci text-decoration, qui peut définir la ligne, le style et la couleur en une seule déclaration).

Cette page couvre la syntaxe, chaque valeur avec un exemple exécutable, ainsi que les cas d'usage les plus adaptés à chaque style.

Quand l'utiliser

wavy est le choix non par défaut le plus courant — il imite le soulignement rouge ondulé des correcteurs orthographiques, signifiant « cet élément nécessite attention. » C'est également le rendu utilisé par les navigateurs pour les erreurs d'orthographe et de grammaire.
dotted et dashed produisent un soulignement plus doux et discret qu'un trait plein, pratiques pour des liens moins mis en valeur ou des notes de bas de page.
double trace deux lignes parallèles fines, utiles pour les titres ou pour signaler quelque chose de plus fort qu'un soulignement ordinaire.
solid est la valeur par défaut — il n'est nécessaire de l'écrire que pour remplacer un style hérité ou défini par un raccourci.

Cette propriété n'étant ni héritée ni animable, appliquez-la sur l'élément dont vous souhaitez styliser la décoration ; il n'est pas possible de faire une transition entre les styles.

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éritage	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textDecorationStyle = "dotted";

Syntaxe

Valeurs de CSS text-decoration-style

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

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

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

Essayez vous-même »

Résultat

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

Exemple de code 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>

Essayez vous-même »

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

Exemple de code 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>

Essayez vous-même »

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

Exemple de code 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>

Essayez vous-même »

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

Exemple de code 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>

Essayez vous-même »

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

Exemple text-decoration-style avec toutes les valeurs

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

Essayez vous-même »

Valeurs

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

Compatibilité des navigateurs

text-decoration-style est prise en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). Le style wavy s'affiche notamment de façon cohérente sur tous ces navigateurs. Aucun préfixe vendeur ni solution de repli n'est nécessaire aujourd'hui ; dans les navigateurs qui ne prenaient pas en charge cette propriété, la décoration revenait simplement à une ligne pleine, garantissant ainsi une dégradation gracieuse.

Propriétés associées

text-decoration-line — choisit quelle(s) ligne(s) apparaissent (underline, overline, line-through).
text-decoration-color — définit la couleur de la décoration.
text-decoration — le raccourci qui définit la ligne, le style et la couleur en une seule déclaration.

Exercice

Pratique

Laquelle des valeurs suivantes est valide pour la propriété 'text-decoration-style' en CSS ?