---
title: text-decoration-style
slug: Web/CSS/text-decoration-style
tags:
  - Propiedad CSS
  - Texto CSS
translation_of: Web/CSS/text-decoration-style
---
<div>{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad CSS <strong><code>text-decoration-style</code></strong> define el estilo de las líneas especificadas por {{ cssxref("text-decoration-line") }}. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por <code>text-decoration-line</code>.</p>

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

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush: 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;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>solid double dotted dashed wavy</code></dt>
 <dd>Es una de las siguientes palabras clave:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Palabra clave</th>
    <th scope="col">Descripción</th>
    <th scope="col">Comentario</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>solid</code></td>
    <td>Dibuja una línea simple</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>double</code></td>
    <td>Dibuja una línea doble</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>dotted</code></td>
    <td>Dibuja una línea punteada</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>dashed</code></td>
    <td>Dibuja una línea discontinua</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>wavy</code></td>
    <td>Dibuja una línea ondulada</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>-moz-none</code>{{ non-standard_inline }}<code> </code></td>
    <td>No dibuja una línea</td>
    <td><strong>No usarse:</strong> usar {{ cssxref("text-decoration-line") }}<code>: none</code> en su lugar</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: css" style="display: none;">.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;
}</pre>

<pre class="brush: css">.example {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}
</pre>

<pre class="brush: html">&lt;p class="example"&gt;Así se ve el resultado.&lt;/p&gt;
</pre>

<p>{{ EmbedLiveSample('Ejemplos', '', '', '') }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td>
   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
   <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{ CompatibilityTable }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}<br>
    {{ CompatGeckoDesktop("36.0") }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
  <tr>
   <td>wavy</td>
   <td>{{ CompatGeckoDesktop("6.0") }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}<br>
    {{ CompatGeckoMobile("36.0") }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
  <tr>
   <td>wavy</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatGeckoMobile("6.0") }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>