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

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Property Values

ValueDescription
solidDraws a solid single line. It is the default value of the text-decoration-style property.
doubleDraws double solid lines.
dottedDraws a dotted line.
dashedDraws a dashed line.
wavyDraws a wavy line.
initialSets the text-decoration-style property to its default value.
inheritInherits 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>
<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>
<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>
<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>
<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>
<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>

<!--Driver Code Ends-->

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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-decoration-style property
    </title>

<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>

<!--Driver Code Ends-->
Comment
Article Tags:
Web Technologies
CSS
CSS-Properties

Explore