mozilla
Your Search Results

    text-decoration-style

    There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

    {{ CSSRef }}

    Summary

    The text-decoration-style CSS property defines the style of the lines specified by {{ cssxref("text-decoration-line") }}. The style applies to all lines, there is no way to define different style for each of the line defined by text-decoration-line.

    If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like {{ HTMLElement("del") }} or {{ HTMLElement("s") }}. As browsers can disabled styling in some cases, the semantic meaning won't disappear in such a situation.

    {{cssbox("text-decoration-style")}}

    Syntax

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

    Values

    solid double dotted dashed wavy
    Is one of the following keywords :
    Keyword Description Comment
    solid Draws a single line  
    double Draws a double line  
    dotted Draws a dotted line  
    dashed Draws a dashed line  
    wavy Draws a wavy line  
    -moz-none{{ non-standard_inline }} Do not draw a line Do not use : use {{ cssxref("text-decoration-line") }}: none instead
    inherit
    Is a keyword indicating to reuse the value calculated on the parent element.

    Formal syntax

    {{csssyntax("text-decoration-style")}}
    

    Examples

    .example { 
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: red;
    }
    
    <p class="example">This is how it looks.</p>
    

    {{ EmbedLiveSample('Examples', '', '', '') }}

    Specifications

    Specification Status Comment
    {{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }} {{ Spec2('CSS3 Text Decoration') }} Initial definition. The {{cssxref("text-decoration")}} property wasn't a shorthand before.

    Browser compatibility

    {{ CompatibilityTable }}

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support {{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0"}}{{ property_prefix("-moz") }}
    {{ CompatGeckoDesktop("36.0") }}
    {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
    wavy {{ CompatGeckoDesktop("6.0") }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support {{ CompatNo }} {{ CompatNo }} {{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0"}}{{ property_prefix("-moz") }}
    {{ CompatGeckoMobile("36.0") }}
    {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
    wavy {{ CompatNo }} {{ CompatNo }} {{ CompatGeckoMobile("6.0") }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}

    See also

    • {{ CSS_Reference:Text }}

    Document Tags and Contributors

    Last updated by: teoli,