Propiedad CSS text-decoration-style

La propiedad text-decoration-style especifica el estilo de la decoración de texto. Los estilos pueden ser sólido, discontinuo, punteado, doble y ondulado.

La propiedad text-decoration-style es una de las propiedades de CSS3.

Valor inicial	solid
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.textDecorationStyle = "dotted";

Sintaxis

Valores de CSS text-decoration-style

css

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

Ejemplo de la propiedad text-decoration-style:

Ejemplo de text-decoration-style

html

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

Try it Yourself »

Resultado

CSS text-decoration-style wavy

Ejemplo de la propiedad text-decoration-style con el valor "wavy":

Ejemplo de código de text-decoration-style wavy

html

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

Try it Yourself »

Ejemplo de la propiedad text-decoration-style con el valor "dotted":

Ejemplo de código de text-decoration-style dotted

html

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

Try it Yourself »

Ejemplo de la propiedad text-decoration-style con el valor "dashed":

Ejemplo de código de text-decoration-style dashed

html

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

Try it Yourself »

Ejemplo de la propiedad text-decoration-style con el valor "double":

Ejemplo de código de text-decoration-style double

html

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

Try it Yourself »

Ejemplo de la propiedad text-decoration-style con todos los valores:

Ejemplo de todos los valores de text-decoration-style

html

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

Try it Yourself »

Valores

Valor	Descripción	Probarlo
solid	Define una línea única. Este es el valor predeterminado de esta propiedad.	Probarlo »
double	Define una línea doble.	Probarlo »
dotted	Define una línea punteada.	Probarlo »
dashed	Define una línea discontinua.	Probarlo »
wavy	Define una línea ondulada.	Probarlo »
initial	Establece la propiedad en su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Propiedad CSS text-decoration-style ​

Sintaxis ​

Ejemplo de la propiedad text-decoration-style: ​

Resultado ​

Ejemplo de la propiedad text-decoration-style con el valor "wavy": ​

Ejemplo de la propiedad text-decoration-style con el valor "dotted": ​

Ejemplo de la propiedad text-decoration-style con el valor "dashed": ​

Ejemplo de la propiedad text-decoration-style con el valor "double": ​

Ejemplo de la propiedad text-decoration-style con todos los valores: ​

Valores ​

Práctica ​

Propiedad CSS text-decoration-style

Sintaxis

Ejemplo de la propiedad text-decoration-style:

Resultado

Ejemplo de la propiedad text-decoration-style con el valor "wavy":

Ejemplo de la propiedad text-decoration-style con el valor "dotted":

Ejemplo de la propiedad text-decoration-style con el valor "dashed":

Ejemplo de la propiedad text-decoration-style con el valor "double":

Ejemplo de la propiedad text-decoration-style con todos los valores:

Valores

Práctica