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 inicialsolid
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

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 Non-Standard 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

.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

BCD tables only load in the browser