CSS | text-decoration-style Property

Last Updated : 09 Aug, 2019

The text-decoration-style property in CSS is used to set the text-decoration of an element. The text-decoration property is the combination of text-decoration-line, text-decoration-style and text-decoration-color property.

Syntax:

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

Property Values:

solid: It draw a solid single line. It is the default value of text-decoration-style property.

Style:

text-decoration-style: solid;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-solid

double: It draws double solid lines.

Style:

text-decoration-style: double;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-double

dotted: It draws a dotted line.

Style:

text-decoration-style: dotted;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-dotted

dashed: It draws a dashed line.

Style:

text-decoration-style: dashed;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-dashed

wavy: It draws a wavy line.

Style:

text-decoration-style: wavy;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-wavy

initial: It sets the text-decoration-style property to its default value.

Style:

text-decoration-style: initial;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-initial

inherit: This property is inherited from its parent element.

Style:

text-decoration-style: inherit;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS text-decoration-style property
        </title>
          
        <!-- 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>
    </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>                    

Output:
text-decoration-style-inherit

Supported Browsers: The browser supported by text-decoration-style property are listed below:

Google Chrome 57.0
Firefox 36.0
Opera 44.0

My Personal Notes

Related Articles