CSS

Cascading Style Sheets text-decoration-style property.

text-decoration-style

 text-decoration-styleプロパティは、 text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用します。

 text-decoration-styleプロパティで要素に線スタイルを指定した場合、その子孫ボックスに異なるスタイルが指定されていたとしても、テキストにつけられる傍線のスタイルは同じとなります。

solid
実線(初期値)
double
二重線
dotted
点線
dashed
破線
wavy
波線

初期値・適用対象・値の継承

初期値
solid
適用対象
すべての要素
値の継承
しない

Sample

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;


text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

HTML source


<p class="uline s1">text-decoration-style: solid;</p>
<p class="uline s2">text-decoration-style: double;</p>
<p class="uline s3">text-decoration-style: dotted;</p>
<p class="uline s4">text-decoration-style: dashed;</p>
<p class="uline s5">text-decoration-style: wavy;</p>
<hr>
<p class="oline s1">text-decoration-style: solid;</p>
<p class="oline s2">text-decoration-style: double;</p>
<p class="oline s3">text-decoration-style: dotted;</p>
<p class="oline s4">text-decoration-style: dashed;</p>
<p class="oline s5">text-decoration-style: wavy;</p>

CSS source


.uline {text-decoration-line: underline;}
.oline {text-decoration-line: overline;}
.s1 {text-decoration-style: solid;}
.s2 {text-decoration-style: double;}
.s3 {text-decoration-style: dotted;}
.s4 {text-decoration-style: dashed;}
.s5 {text-decoration-style: wavy;}

Browser support

Data on support for the mdn-css__properties__text-decoration-style feature across the major browsers from caniuse.com