Proprietà CSS text-decoration-style - Sintassi, Valori, Esempi

La proprietà CSS text-decoration-style imposta lo stile della linea delle decorazioni aggiunte da text-decoration-line — sottolineatura, sopralineatura o testo barrato. Gli stili disponibili sono solid, double, dotted, dashed e wavy.

Da sola questa proprietà non produce alcun effetto visibile: uno stile di linea appare solo quando c'è una linea a cui applicarlo. Pertanto viene quasi sempre abbinata a text-decoration-line (oppure alla sintassi abbreviata text-decoration, che può impostare la linea, lo stile e il colore in un'unica dichiarazione).

Questa pagina illustra la sintassi, ogni valore con un esempio eseguibile e i casi d'uso più indicati per ciascuno stile.

Quando usarla

wavy è la scelta non predefinita più comune — imita il tratteggio rosso ondulato dei correttori ortografici, trasmettendo il messaggio "questo richiede attenzione". È anche lo stile usato dai browser per evidenziare errori ortografici e grammaticali.
dotted e dashed producono una sottolineatura più leggera e morbida rispetto a una linea continua, utile per link in secondo piano o note a piè di pagina.
double disegna due sottili linee parallele, adatta per intestazioni o per segnalare qualcosa di più rilevante rispetto a una normale sottolineatura.
solid è il valore predefinito — va specificato solo per sovrascrivere uno stile ereditato o impostato con la sintassi abbreviata.

Poiché la proprietà non è ereditata e non è animabile, va impostata direttamente sull'elemento di cui si vuole stilizzare la decorazione; non è possibile effettuare transizioni tra stili.

La proprietà text-decoration-style fa parte delle proprietà CSS3.

Valore iniziale	solid
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.textDecorationStyle = "dotted";

Sintassi

Valori di CSS text-decoration-style

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

Esempio della proprietà text-decoration-style:

Esempio di 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>

Provalo tu stesso »

Risultato

Esempio della proprietà text-decoration-style con il valore "wavy":

Esempio di codice 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>

Provalo tu stesso »

Esempio della proprietà text-decoration-style con il valore "dotted":

Esempio di codice 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>

Provalo tu stesso »

Esempio della proprietà text-decoration-style con il valore "dashed":

Esempio di codice 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>

Provalo tu stesso »

Esempio della proprietà text-decoration-style con il valore "double":

Esempio di codice 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>

Provalo tu stesso »

Esempio della proprietà text-decoration-style con tutti i valori:

Esempio text-decoration-style con tutti i valori

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

Provalo tu stesso »

Valori

Valore	Descrizione	Provalo
solid	Definisce una linea singola. È il valore predefinito di questa proprietà.	Provalo »
double	Definisce una doppia linea.	Provalo »
dotted	Definisce una linea punteggiata.	Provalo »
dashed	Definisce una linea tratteggiata.	Provalo »
wavy	Definisce una linea ondulata.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Supporto browser

text-decoration-style è supportata da tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Lo stile wavy in particolare viene reso in modo coerente su tutti questi browser. Oggi non sono necessari prefissi vendor né fallback; nei browser che non supportavano la proprietà, la decorazione tornava semplicemente a una linea continua, quindi il degrado è sempre stato ottimale.

Proprietà correlate

text-decoration-line — sceglie quale linea (o linee) visualizzare (sottolineatura, sopralineatura, testo barrato).
text-decoration-color — imposta il colore della decorazione.
text-decoration — la sintassi abbreviata che imposta linea, stile e colore in un'unica dichiarazione.

Esercitazione

Pratica

Quale dei seguenti è un valore valido per la proprietà 'text-decoration-style' in CSS?