---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
  - CSS
  - PrecisaDeCompatibilidade
  - Propriedade CSS
  - Referencia
  - Texto CSS
translation_of: Web/CSS/text-decoration
---
<p>{{CSSRef}}</p>

<h2 id="Resumo">Resumo</h2>

<p>A propriedade <strong><code>text-decoration</code></strong> do CSS é usada para definir a formatação de  <code>underline</code>, <code>overline</code>, <code>line-through</code> ou <code>blink</code>. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.</p>

<p>A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup <code>&lt;p&gt;Esse texto tem &lt;em&gt;alguns elementos enfatizados&lt;/em&gt; nele.&lt;/p&gt;</code>, a regra de estilo <code>p { text-decoration: underline; }</code> faria com que todo o parágrafo fosse sublinhado. A regra <code>em { text-decoration: none; }</code> não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra <code>em { text-decoration: overline; }</code> iria decorar o trecho "alguns elementos enfatizados".</p>

<div class="note style-wrap">
<p><strong>Nota: </strong>CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, e {{cssxref("text-decoration-style")}}. Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.</p>
</div>

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

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: css">/* Valores Chave */
text-decoration: none;                 /* Sem decoração */
text-decoration: underline red;        /* Sublinhado vermelho */
text-decoration: underline wavy red;   /* Sublinhado ondulado vermelho */

/* Valores Globais */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
</pre>

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

<p>A propriedade <code>text-decoration</code> é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, e {{cssxref("text-decoration-style")}}</p>

<h3 id="Sintaxe_Formal">Sintaxe Formal</h3>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: css">h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}
</pre>

<pre class="brush: html" style="display: none;">&lt;h1 class="under"&gt;Underlined Header&lt;/h1&gt;
&lt;p class="line"&gt;If you want to strike out text, use line-through.&lt;/p&gt;
&lt;p class="blink"&gt;This text might blink for you - if you use Explorer, it will not.&lt;/p&gt;
&lt;h1 class="over"&gt;and now an overlined header.&lt;/h1&gt;
&lt;p&gt;This &lt;a class="none" href="textdecoration.html"&gt;link will not be underlined&lt;/a&gt;, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.&lt;/p&gt;
&lt;p class="underover"&gt;This text has both underline and overline.&lt;/p&gt;
</pre>

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

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentários</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
   <td>{{Spec2('CSS3 Text Decoration')}}</td>
   <td>Transformado em uma propriedade reduzida. Adicionado suporte para o valor {{cssxref('text-decoration-style')}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Sem mudanças significantes.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</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>Suporte básico</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>1.0</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td>
   <td>{{CompatGeckoDesktop("1.0")}}<br>
    {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>4.0<br>
    15.0<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Propriedade reduzida</td>
   <td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br>
    {{CompatGeckoDesktop("36.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.1<sup>[2]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><font face="Consolas, Liberation Mono, Courier, monospace">Valor blink</font></td>
   <td>{{CompatGeckoDesktop("1.0")}}<br>
    {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>4.0<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Propriedade reduzida</td>
   <td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br>
    {{CompatGeckoMobile("36.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>8<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] O valor <code>blink </code>não tem nenhum efeito.</p>

<p>[2] Safari não suporta {{cssxref("text-decoration-style")}}.</p>

<p>[3] Essa versão do Gecko tem implementação parcial.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>O atributo {{cssxref("list-style")}} controla a aparência dos itens em listas {{HTMLElement("ol")}} e {{HTMLElement("ul")}} no HTML.</li>
</ul>