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

<h2 id="Resumo"><span class="short_text" id="result_box" lang="pt"><span>Resumo</span></span></h2>

<p><span id="result_box" lang="pt"><span>A propriedade</span> <span>CSS </span></span><strong><code>text-decoration-style</code></strong> CSS<span lang="pt"> <span>define</span> <span>o estilo das</span> <span>linhas especificadas</span> <span>por {</span><span>{</span><span>cssxref</span> <span>(</span><span>"</span><span>text-decoration</span><span>-line</span><span>")}</span><span>}.</span> <span>O</span> <span>modelo</span> <span>aplica-se a</span> <span>todas as linhas</span><span>,</span> <span>não há nenhuma</span> forma<span> de</span> <span>definir</span> <span>estilos diferente</span>s <span>para cada uma das</span> <span>linhas utilizando </span></span><code>text-decoration-line</code><span lang="pt"><span>.</span></span><br>
 <br>
 <span id="result_box" lang="pt"><span>Se</span> <span>a decoração</span> <span>especificada</span> <span>tem um</span> <span>significado semântico</span> <span>específico,</span> <span>como uma linha de</span></span> line-through<span lang="pt"> <span>o que significa que</span> <span>um texto</span> <span>tenha sido excluído,</span> <span>autores</span> <span>são encorajados a</span> <span>denotar</span> <span>este significado</span> <span>usando uma tag</span> <span>HTML</span><span>, como</span> </span>{{ HTMLElement("del") }} ou {{ HTMLElement("s") }}<span lang="pt"><span>.</span> <span>Como</span> <span>os navegadores podem</span> ser <span>deficientes</span> <span>em alguns casos,</span> <span>o significado semântico</span> <span>não vai desaparecer</span> <span>em tal situação</span><span>.</span></span></p>

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

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
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><span class="short_text" id="result_box" lang="pt"><span>É uma das</span> <span>seguintes palavras-chave</span><span>:</span></span>
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Keyword</th>
    <th scope="col">Description</th>
    <th scope="col">Comment</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>solid</code></td>
    <td>Draws a single line</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>double</code></td>
    <td>Draws a double line</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>dotted</code></td>
    <td>Draws a dotted line</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>dashed</code></td>
    <td>Draws a dashed line</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>wavy</code></td>
    <td>Draws a wavy line</td>
    <td> </td>
   </tr>
   <tr>
    <td><code>-moz-none</code>{{ non-standard_inline }}<code> </code></td>
    <td>Do not draw a line</td>
    <td><strong>Do not use</strong><strong> :</strong> use {{ cssxref("text-decoration-line") }}<code>: none</code> instead</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>inherit</code></dt>
 <dd><span id="result_box" lang="pt"><span>É</span> <span>uma palavra-chave</span> <span>indicando</span> <span>a reutilizar</span> <span>o valor</span> <span>calculado sobre</span> <span>o elemento pai</span><span>.</span></span></dd>
</dl>

<h3 id="Syntax_Formal">Syntax Formal</h3>

{{csssyntax}}

<h2 id="Exemplo">Exemplo</h2>

<pre class="brush: css" class="hidden">.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;This is how it looks.&lt;/p&gt;
</pre>

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

<h2 id="Especificações"><span class="short_text" id="result_box" lang="pt"><span>Especificações</span></span></h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td>
   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
   <td>Initial definition. The {{cssxref("text-decoration")}} property wasn't a shorthand before.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatíveis">Browser compatíveis</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</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>Feature</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>Basic support</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>