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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она поддерживается браузерами с июля 2015 года.

Свойство text-decoration-style CSS задаёт стиль линий, указанных с помощью text-decoration-line. Стиль применяется ко всем линиям, заданным с помощью text-decoration-line.

Попробуйте

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

Если указанное оформление имеет особое семантическое значение, например линия зачёркивания означает, что текст был удалён, авторам рекомендуется обозначать это значение с помощью HTML-тега, например <del> или <s>. Поскольку в некоторых случаях браузеры могут отключать стили, в такой ситуации семантическое значение не исчезнет.

При одновременной настройке нескольких свойств оформления линий может быть удобнее использовать сокращённое свойство text-decoration.

Синтаксис

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

Значения

solid: Рисует одну линию.
double: Рисует двойную линию.
dotted: Рисует пунктирную линию из точек.
dashed: Рисует пунктирную линию.
wavy: Рисует волнистую линию.
-moz-none: Не рисует линию. Вместо этого используйте text-decoration-line: none.

Формальное определение

Исходное значение	solid
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

Формальный синтаксис

text-decoration-style = 
  solid |
  double |
  dotted |
  dashed |
  wavy

Примеры

Создание волнистого подчёркивания

Следующий пример создаёт красное волнистое подчёркивание:

CSS

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

HTML

<p class="wavy">This text has a wavy red line beneath it.</p>

Результат

Спецификации

Спецификация
CSS Text Decoration Module Level 3 # text-decoration-style-property

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	Android WebView	WebView на iOS
`text-decoration-style`	57	79	36 6–39	44	12.1 8	57	36 6–39	43	12.2 8	7.0	57	12.2 8
`dashed`	57	79	6	44	8	57	6	43	8	7.0	57	8
`dotted`	57	79	6	44	8	57	6	43	8	7.0	57	8
`double`	57	79	6	44	8	57	6	43	8	7.0	57	8
`solid`	57	79	6	44	8	57	6	43	8	7.0	57	8
`wavy`	57	79	6	44	8	57	6	43	8	7.0	57	8

См. также

При одновременной настройке нескольких свойств оформления линий может быть удобнее использовать сокращённое свойство text-decoration.
text-decoration-line
text-decoration-color
text-decoration-thickness
text-underline-offset

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration-style