Propriedade text-decoration
Última atualização: 2026-09-13
text-decoration Propriedade text-decoration
A propriedade text-decoration do CSS adiciona linhas decorativas ao texto, mais comumente sublinhados, sobrelinhados e tachados. É o atalho para quatro subpropriedades: text-decoration-line, text-decoration-style, text-decoration-color e text-decoration-thickness. Por padrão, links (elementos a) são sublinhados; estilos de reset geralmente removem esse sublinhado.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness> | Valor | Atalho de decoração de texto (sublinhado, tachado etc.) |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-decoration | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Use text-decoration: none; para remover o sublinhado padrão dos links, mas mantenha alguma outra dica visual (como uma mudança de cor) para preservar a acessibilidade.
Importante： O text-decoration não é mais herdado por padrão no CSS3, mas a decoração de um ancestral ainda é renderizada sobre o texto do filho. Use suas subpropriedades se precisar de controle refinado.
❓ Perguntas Frequentes
QQual é a diferença entre os sublinhados de text-decoration e border-bottom?
AA linha desenhada por text-decoration acompanha o texto, com posição e espessura controladas pelo navegador; border-bottom é a borda inferior do elemento, situada na parte de baixo de toda a linha, onde você pode controlar precisamente o estilo, a cor e a distância — embora se estenda pela largura total do elemento.
QComo altero apenas a cor ou o estilo de linha do sublinhado no CSS?
AUse as três subpropriedades: text-decoration-color para a cor, text-decoration-style para o tipo de linha (solid, dashed, dotted, wavy) e text-decoration-thickness para a espessura. Cada uma pode ser definida independentemente enquanto as outras permanecem em seus padrões.
QComo removo o sublinhado padrão dos links usando apenas CSS?
AEscreva text-decoration: none no link. Após removê-lo, mantenha outra distinção visual, como uma mudança de cor ou efeito de hover; caso contrário, os usuários podem não reconhecer o link e a acessibilidade sofre.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade text-decoration-line
Define o tipo de linha de decoração independentemente.
Propriedade text-underline-offset
Controla o espaçamento entre um sublinhado e o texto.
