CSS | text-decoration-style Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-solid

  • double: It draws double solid lines.

    Style:

    text-decoration-style: double;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-double

  • dotted: It draws a dotted line.

    Style:

    text-decoration-style: dotted;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-dotted

  • dashed: It draws a dashed line.

    Style:

    text-decoration-style: dashed;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-dashed

  • wavy: It draws a wavy line.

    Style:

    text-decoration-style: wavy;

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-wavy

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

    Style:

    text-decoration-style: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    text-decoration-style-initial

  • inherit: This property is inherited from its parent element.

    Style:

    text-decoration-style: inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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 arrow_drop_up

Recommended Posts:

    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.