Skip to content
Related Articles

Related Articles

Improve Article

CSS | text-decoration-color Property

  • Last Updated : 09 Aug, 2019

This property is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.

Syntax:

text-decoration-color: color|initial|inherit;

Property values:

  • color: Sets the color of the text-decoration.
    Syntax:
    text-decoration-color: color;
    

    Example:






    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            table {
                margin: auto;
            }
              
            th {
                padding: 10px 25px;
            }
              
            .underline {
                text-decoration: underline wavy;
            }
              
            .overline {
                text-decoration: overline solid;
            }
              
            .line-through {
                text-decoration: line-through double;
            }
              
            .red td {
                text-decoration-color: red;
            }
              
            .green td {
                text-decoration-color: green;
            }
              
            .blue td {
                text-decoration-color: blue;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
      
        <h2> text-decoration-color: color;</h2>
        <table>
            <tr>
                <th>underline</th>
                <th>line-through</th>
                <th>overline</th>
            </tr>
            <tr class="red">
                <td class="underline">Hello Geeks!</td>
                <td class="line-through">Hello Geeks!</td>
                <td class="overline">Hello Geeks!</td>
            </tr>
            <tr class="green">
                <td class="underline">Hello Geeks!</td>
                <td class="line-through">Hello Geeks!</td>
                <td class="overline">Hello Geeks!</td>
            </tr>
            <tr class="blue">
                <td class="underline">Hello Geeks!</td>
                <td class="line-through">Hello Geeks!</td>
                <td class="overline">Hello Geeks!</td>
            </tr>
        </table>
    </body>
      
    </html>

    Output:

  • initial: Sets this property to its default value.
    Syntax:
    text-decoration-color: initial;
    

    Example:




    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            #example {
                text-decoration: underline double;
                text-decoration-color: initial;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2> text-decoration-color: initial;</h2>
        <div id="example">
         This text-decoration-color of this text is set to initial.
        </div>
    </body>
      
    </html>

    Output:

    Supported browsers: The browsers supported by text-decoration-color Property are listed below:

    • Google Chrome 57.0
    • Firefox 36.0
    • Opera 44.0
    • Safari 7.1



    My Personal Notes arrow_drop_up
Recommended Articles
Page :