Skip to content
Related Articles

Related Articles

CSS | text-decoration-style Property

View Discussion
Improve Article
Save Article
Like Article
  • 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
arrow_drop_up
Previous
CSS flex Property
Next

CSS | counter-increment Property
Recommended Articles
Page :
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-top-width Property
03, Jan 19
CSS | isolation Property
16, Jan 19
CSS | border-inline-start-style Property
26, Mar 20
CSS | column-rule-width Property
03, Jan 19
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | word-spacing Property
24, Dec 18
CSS | animation-delay Property
18, Dec 18
CSS | margin-top Property
03, Jan 19
CSS border-radius Property
13, Jul 18
CSS | grid Property
15, Jan 19
CSS | font-size-adjust Property
16, Jan 19
CSS | visibility Property
23, Oct 18
CSS | Display property
27, Aug 18
CSS | height Property
11, Jan 19
CSS | transform-origin Property
24, Jul 19
CSS | animation-name Property
14, Dec 18
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty





Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!