Свойство text-decoration-style

Свойство text-decoration-style меняет тип линии у текста: одиночная линия, двойная, в виде точек, в виде тире, волнистая линия.

Свойство следует использовать совместно со свойствами text-decoration-line и text-decoration-color. Эти свойства расширяют действие свойства text-decoration, являясь более продвинутыми аналогами.

Синтаксис

cssселектор {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Значения

Значение	Описание
`solid`	Сплошная линия.
`double`	Двойная линия.
`dotted`	Линия в виде точек.
`dashed`	Линия в виде тире.
`wavy`	Волнистая линия.

Значение по умолчанию: solid.

Пример . Значение wavy

Сейчас текст станет подчеркнутым красной волнистой линией:

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

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

Результат:

Пример . Значение dotted

Сейчас текст станет подчеркнутым красной линией в виде точек:

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

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

Результат:

Пример . Значение double

Сейчас текст станет перечеркнутым красной двойной линией:

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

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

Результат: