text-decoration-style プロパティ

text-decoration-style プロパティは、テキストの装飾線の種類を変更します：実線、二重線、点線、破線、波線。

このプロパティは、text-decoration-line および text-decoration-color プロパティと組み合わせて使用する必要があります。これらのプロパティは、text-decoration プロパティの機能を拡張し、より高度な代替手段となります。

構文

セレクタ {
	text-decoration-line: solid | double | dotted | dashed | wavy;
}

初期値: solid。

以下のテキストは赤い波線の下線付きになります:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: wavy;
	text-decoration-color: red;
	text-decoration-line: underline;
}

以下のテキストは赤い点線の下線付きになります:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: dotted;
	text-decoration-color: red;
	text-decoration-line: underline;
}

以下のテキストは赤い二重線の取り消し線付きになります:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: double;
	text-decoration-color: red;
	text-decoration-line: line-through;
}