text-decoration-style

  • Revision slug: CSS/text-decoration-style
  • Revision title: text-decoration-style
  • Revision id: 25119
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 3 words removed

Revision Content

{{ SeeCompatTable() }}

Summary

The text-decoration-style CSS property defines the style of the line(s) specified by {{ cssxref("text-decoration-line") }}.

  • {{ Xref_cssinitial() }}: solid
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

text-decoration-style: 	inherit     or
text-decoration-style:  style

where :

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

Examples

.example { 
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}

This is how it looks.

Specifications

Specification Status Comment
CSS Text Level 3 {{ Spec2('CSS3 Text') }}  

Browser compatibility

{{ CompatibilityTable() }}

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

{{ CompatGeckoMobile("6.0") }}
{{ property_prefix("-moz-") }}

{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

{{ languages( { "ja": "ja/CSS/text-decoration-style"} ) }}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<h2>Summary</h2>
<p>The <code>text-decoration-style</code> CSS property defines the style of the line(s) specified by {{ cssxref("text-decoration-line") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>solid</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre class="eval">text-decoration-style: 	<a href="/en/CSS/inherit" title="en/CSS/inherit">inherit</a>     <em>or
</em>text-decoration-style:  <em>style</em>
</pre>
<p>where :</p>
<dl> <dt style="margin:0 40px;">inherit</dt> <dd style="margin:0 80px;">Is a keyword indicating to reuse the value calculated on the parent element.</dd> <dt style="margin:0 40px;"><em>style</em></dt> <dd style="margin:0 80px;">Is one of the following keywords : <table class="standard-table"> <thead> <tr> <th scope="col">Keyword</th> <th scope="col">Description</th> <th scope="col">Live example</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><code>solid</code></td> <td>Draws a single line</td> <td><span style="-moz-text-decoration-style:solid;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:solid;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td> </td> </tr> <tr> <td><code>double</code></td> <td>Draws a double line</td> <td><span style="-moz-text-decoration-style:double;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:double;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td> </td> </tr> <tr> <td><code>dotted</code></td> <td>Draws a dotted line</td> <td><span style="-moz-text-decoration-style:dotted;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:dotted;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td> </td> </tr> <tr> <td><code>dashed</code></td> <td>Draws a dashed line</td> <td><span style="-moz-text-decoration-style:dashed;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:dashed;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td> </td> </tr> <tr> <td><code>wavy</code></td> <td>Draws a wavy line</td> <td><span style="-moz-text-decoration-style:wavy;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:wavy;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td> </td> </tr> <tr> <td><code>-moz-none</code>{{ non-standard_inline() }}<code> </code></td> <td>Do not draw a line</td> <td><span style="-moz-text-decoration-style:-moz-none;-moz-text-decoration-line:line-through;text-decoration-line:line-through;">Lorem</span> <span style="-moz-text-decoration-style:-moz-none;-moz-text-decoration-line:underline;text-decoration-line:underline;">ipsum</span></td> <td><strong>Do not use</strong><strong> :</strong> use {{ cssxref("text-decoration-line") }}<code>: none</code> instead</td> </tr> </tbody> </table> </dd>
</dl>
<h2>Examples</h2>
<pre>.example { 
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}
</pre>
<p><span style="-moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red">This is how it looks.</span></p>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-text/#text-decoration-style" title="http://dev.w3.org/csswg/css3-text/#text-decoration-style">CSS Text Level 3</a></td> <td>{{ Spec2('CSS3 Text') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("6.0") }}<br> {{ property_prefix("-moz-") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td> <p>{{ CompatGeckoMobile("6.0") }}<br> {{ property_prefix("-moz-") }}</p> </td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> <li>{{ CSS_Reference:Text() }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/text-decoration-style"} ) }}</p>
Revert to this revision