Skip to content
Related Articles

Related Articles

CSS | text-decoration-style Property

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2022
View Discussion
Improve Article
Save Article

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: 

html




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

html




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

html




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

html




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

html




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

html




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

html




<!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
  • Edge 79.0
  • Firefox 36.0
  • Opera 44.0
  • Safari 12.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!