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 January 2020.

Resumen

La propiedad CSS text-decoration-style define el estilo de las líneas especificadas por text-decoration-line. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por text-decoration-line.

Si la decoración especificada tiene un significado semántico propio, como line-through, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como <del> o <s>. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.

Valor inicial	`solid`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Sintaxis

css

/* Valores clave */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Valores globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Valores

solid double dotted dashed wavy

Es una de las siguientes palabras clave:

Palabra clave	Descripción	Comentario
`solid`	Dibuja una línea simple
`double`	Dibuja una línea doble
`dotted`	Dibuja una línea punteada
`dashed`	Dibuja una línea discontinua
`wavy`	Dibuja una línea ondulada
`-moz-none` No estándar	No dibuja una línea	No usarse: usar `text-decoration-line: none` en su lugar

inherit

Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.

Sintaxis formal

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

Ejemplos

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">Así se ve el resultado.</p>

Especificaciones

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