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 July 2015.

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

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

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-style
wavy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.