text-decoration-style

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

/* 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 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

solid | (en-US) double | (en-US) dotted | (en-US) dashed | (en-US) wavy

Ejemplos

.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;
}

.example {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}

<p class="example">Así se ve el resultado.</p>

Especificaciones

Especificación	Estado	Comentarios
CSS Text Decoration Module Level 3 La definición de 'text-decoration-style' en esta especificación.	Candidate Recommendation	Definición inicial. La propiedad `text-decoration` no era una forma reducida anteriormente.

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Soporte básico	6.0 (6.0) - 39.0 (39.0)-moz (en-US) 36.0 (36.0)	Sin soporte	Sin soporte	Sin soporte	Sin soporte
wavy	6.0 (6.0)	Sin soporte	Sin soporte	Sin soporte	Sin soporte

Característica	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico	Sin soporte	Sin soporte	6.0 (6.0)- 39.0 (39.0)-moz (en-US) 36.0 (36.0)	Sin soporte	Sin soporte	Sin soporte
wavy	Sin soporte	Sin soporte	6.0 (6.0)	Sin soporte	Sin soporte	Sin soporte