CSS - text-decoration-style

概要

属性名	text-decoration-style
値	solid \| double \| dotted \| dashed \| wavy
初期値	solid
適用可能要素	すべての要素
継承	なし
サポート	https://caniuse.com/mdn-css_properties_text-decoration-style

説明

テキストの装飾線 (上線、下線、打消し線) の線種を指定します。text-decoration で他の属性とまとめて指定することもできます。

値	説明
solid	直線をひきます。
double	二重線をひきます。
dotted	点線をひきます。
dashed	ダッシュ線をひきます。
wavy	波線をひきます。

使用例

CSS

.td {
  text-decoration-line: underline;
}
.solid {
  text-decoration-style: solid;
}
.double {
  text-decoration-style: double;
}
.dotted {
  text-decoration-style: dotted;
}
.dashed {
  text-decoration-style: dashed;
}
.wavy {
  text-decoration-style: wavy;
}

HTML

<span class="td solid">直線</span>
<span class="td double">二重線</span>
<span class="td dotted">点線</span>
<span class="td dashed">ダッシュ線</span>
<span class="td wavy">波線</span>

表示

直線二重線点線ダッシュ線波線

リンク

初版：2022年7月31日、最終更新：2022年7月31日

https://www.tohoho-web.com/css/prop/text-decoration-style.htm

CSS - text-decoration-style

概要

説明

使用例

関連項目

リンク