CSS textdecorationstyle Property (original) (raw)

CSS text-decoration-style Property

Last Updated : 28 May, 2026

The text-decoration-style property in CSS is used to define the style of text decorations like underlines, overlines, or line-through effects. It allows developers to customize the appearance of decorative lines to make text more visually appealing.

Supports decoration styles such as solid, double, dotted, dashed, and wavy.
Works together with text-decoration-line and text-decoration-color for full customization.
Helps improve the visual design and emphasis of text elements on web pages.

**Syntax

**Property Values

Value	Description
**solid	Draws a solid single line. It is the default value of the text-decoration-style property.
**double	Draws double solid lines.
**dotted	Draws a dotted line.
**dashed	Draws a dashed line.
**wavy	Draws a wavy line.
**initial	Sets the text-decoration-style property to its default value.
**inherit	Inherits the property from its parent element.

Example 1: Solid Line

Here, we demonstrate the text-decoration-style property with solid lines applied to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: solid;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: solid</b>

<p class="GFG1">
    This line has a solid underline.
</p>
<p class="GFG2">
    This line has a solid line-through.
</p>
<p class="GFG3">
    This line has a solid overline.
</p>

Example 2: Double Line

Here, we use the text-decoration-style property with double lines applied to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: double;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: double</b>

<p class="GFG1">
    This line has a double underline.
</p>
<p class="GFG2">
    This line has a double line-through.
</p>
<p class="GFG3">
    This line has a double overline.
</p>

**Example 3: Dotted Line

Here, we use the text-decoration-style property with dotted lines applied to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: dotted;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: dotted</b>

<p class="GFG1">
    This line has a dotted underline.
</p>
<p class="GFG2">
    This line has a dotted line-through.
</p>
<p class="GFG3">
    This line has a dotted overline.
</p>

**Example 4: Dashed Line

Here, we use the text-decoration-style property with dashed lines applied to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: dashed;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: dashed</b>

<p class="GFG1">
    This line has a dashed underline.
</p>
<p class="GFG2">
    This line has a dashed line-through.
</p>
<p class="GFG3">
    This line has a dashed overline.
</p>

**Example 5: Wavy Line

Here, we are using the text-decoration-style property with wavy lines applied to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: wavy;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: wavy</b>

<p class="GFG1">
    This line has a wavy underline.
</p>
<p class="GFG2">
    This line has a wavy line-through.
</p>
<p class="GFG3">
    This line has a wavy overline.
</p>

Example 6: Initial Value

Here, we are using the text-decoration-style property set to initial, applying default styles to underline, line-through, and overline text decorations on different paragraphs using CSS classes.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: initial;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: initial</b>

<p class="GFG1">
    This line has a default underline.
</p>
<p class="GFG2">
    This line has a default line-through.
</p>
<p class="GFG3">
    This line has a default overline.
</p>

**Example 7: Inherited Value

Here, we are using the text-decoration-style property set to inherit, applying wavy underline, line-through, and overline text decorations inherited from a parent div with the main class.

html `

CSS text-decoration-style property

<!-- CSS style -->
<style>
    p {
        text-decoration-style: inherit;
    }

    .main {
        text-decoration-style: wavy;
    }

    .GFG1 {
        text-decoration-line: underline;
    }

    .GFG2 {
        text-decoration-line: line-through;
    }

    .GFG3 {
        text-decoration-line: overline;
    }
</style>

GeeksforGeeks

<b>text-decoration-style: inherit</b>

<div class="main">
    <p class="GFG1">
        This line has a inherited underline style.
    </p>
    <p class="GFG2">
        This line has a inherited line-through style.
    </p>
    <p class="GFG3">
        This line has a inherited overline style.
    </p>
</div>