The text-decoration-style property sets the look of decoration lines created by text-decoration-line—solid, double, dotted, dashed, or wavy.
It is not inherited. The initial value is solid. Style alone is invisible until a line exists. For several decoration settings at once, prefer the text-decoration shorthand.
-moz-noneFirefox once offered -moz-none. Do not use it. Turn decorations off with text-decoration-line: none instead.
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;One keyword only. The same style applies to every line set by text-decoration-line.
text-decoration-styleTurn a line on first, then choose how that line should look.
text-decoration-line: underline (or use the shorthand).solid, double, dotted, dashed, or wavy.text-decoration-color and text-decoration-thickness.<del> or <s>, then style them.| Piece | Required? | Role |
|---|---|---|
| Decoration line | Yes | underline, overline, or line-through |
| Style keyword | Yes | How that line is drawn |
| Color / thickness | Optional | Refine look without changing the pattern |
| Shorthand | Optional | text-decoration: underline wavy red |
Change the style on an underlined sample. The underline stays; only the line pattern changes.
Each snippet focuses on text-decoration-style. A decoration line is included only so the style is visible. Use Try It Yourself for a live editor.
The default style: one continuous underline.
<style>
.link {
text-decoration-line: underline;
text-decoration-style: solid;
}
</style>
<p class="link">Solid underline</p>text-decoration-line: underline draws the line.solid makes that line continuous.solid.A wavy line is useful for hints or light decorative emphasis.
<style>
.hint {
text-decoration-line: underline;
text-decoration-style: wavy;
}
</style>
<p class="hint">Wavy underline</p>text-decoration-color when you need a red hint look.Dashed (or dotted) lines work well for subtle secondary links.
<style>
.soft {
text-decoration-line: underline;
text-decoration-style: dashed;
}
</style>
<p class="soft">Dashed underline</p>dotted for dots.If nothing changes on screen, one of these is usually why.
Without underline, overline, or line-through, changing style has no visible effect.
You cannot give underline and overline different styles on the same element. Both use the same keyword.
For deleted text, use <del> or <s>. Browsers may disable styling; semantic HTML keeps the meaning.
Setting text-decoration later can override a previous text-decoration-style. Order your rules carefully.
-moz-noneThat value is non-standard. Hide decorations with text-decoration-line: none.
text-decoration-style is a browser text-decoration property. Node.js, Deno, and Bun do not apply it.
Supported in modern browsers since around January 2020 interoperability. Internet Explorer does not support this property.
Bottom line: Safe for modern sites. Older Safari needed a -webkit- prefix; IE has no support.
solid, double, dotted, dashed, wavy.solid. Not inherited. Needs a decoration line first.text-decoration can set style with line, color, and thickness together.One line: text-decoration-style picks the pattern of an underline, overline, or line-through.
Learn how to control the thickness of decoration lines.
8 people found this page helpful