CSS text-decoration-style 属性

定義と使用方法

text-decoration-style 属性はテキストの装飾の種類（実線、波線、点線、虚線、双線）を設定します。

ヒント：また参照してください： text-decoration 属性、これはこれら3つの属性のショートカット属性です：

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

また参照してください：

CSS チュートリアル：CSS 文本

HTML DOM リファレンスマニュアル：textDecorationStyle 属性

例

異なる種類の text-decoration スタイルを設定します：

div.a {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
div.b {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
div.c {
  text-decoration-line: underline;
  text-decoration-style: double;
}
div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

実際に試してみてください

CSS 文法

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

属性値

値 説明
solid デフォルト値。ラインは単線で表示されます。
double ラインは双線で表示されます。
dotted ラインは点線で表示されます。
dashed ラインは点線で表示されます。
wavy ラインは波線で表示されます。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は親要素から継承されます。参照してください： inherit。

技術的詳細

デフォルト値： solid
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.textDecorationStyle="wavy"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

moz- で始まる数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1 44.0