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

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

Примеры смотреть в Мозилле (на 2015 год).

Синтаксис

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

Значения

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

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

Примеры

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

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

p {
	-moz-text-decoration-style: wavy;
	-moz-text-decoration-color: red;
	-moz-text-decoration-line: underline;
	-webkit-text-decoration-style: wavy;
	-webkit-text-decoration-color: red;
	-webkit-text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: red;
	text-decoration-line: underline;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

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

p {
	-moz-text-decoration-style: dotted;
	-moz-text-decoration-color: red;
	-moz-text-decoration-line: underline;
	-webkit-text-decoration-style: dotted;
	-webkit-text-decoration-color: red;
	-webkit-text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: red;
	text-decoration-line: underline;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.