text-decoration-style

text-decoration-style

The text-decoration-style CSS property defines the style of the lines specified by text-decoration-line. The style applies to all lines: there is no way to define different styles for each of the lines 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 <del> or <s>. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

Initial value solid
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

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 Do not draw a line Do not use : use text-decoration-line: none instead
inherit
Is a keyword indicating to reuse the value calculated on the parent element.

Formal syntax

solid | double | dotted | dashed | wavy

Examples

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

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration-style' in that specification.
Candidate Recommendation Initial definition. The text-decoration property wasn't a shorthand before.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0)
No support 44 (Yes)-webkit-
wavy 57 6.0 (6.0) No support 44 (Yes)-webkit-
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57 57 6.0 (6.0)- 39.0 (39.0)-moz
36.0 (36.0)
No support 44 (Yes)-webkit-
wavy 57 57 6.0 (6.0) No support 44 (Yes)-webkit-

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部