Свойство CSS text-decoration-style — синтаксис, значения, примеры

CSS-свойство text-decoration-style задаёт стиль линии украшений, добавляемых text-decoration-line — подчёркивания, надчёркивания или зачёркивания. Доступные стили: solid, double, dotted, dashed и wavy.

Само по себе это свойство не даёт видимого эффекта: стиль линии отображается только при наличии самой линии. Поэтому его почти всегда используют вместе с text-decoration-line (или сокращённым свойством text-decoration, которое позволяет задать линию, стиль и цвет за один раз).

На этой странице описаны синтаксис, все значения с рабочими примерами, а также указано, когда лучше всего применять каждый стиль.

Когда использовать

wavy — самый распространённый нестандартный выбор: он имитирует красную волнистую линию, которую рисуют программы проверки правописания, то есть воспринимается как «требует внимания». Именно этот вид используют браузеры для выделения орфографических и грамматических ошибок.
dotted и dashed создают более мягкое и лёгкое подчёркивание по сравнению со сплошной линией — удобно для второстепенных ссылок или сносок.
double рисует две тонкие параллельные линии; подходит для заголовков или для обозначения чего-то более значимого, чем обычное подчёркивание.
solid — значение по умолчанию; его нужно указывать явно только для переопределения унаследованного или сокращённого стиля.

Поскольку свойство не наследуется и не поддерживает анимацию, его следует задавать непосредственно на том элементе, оформление которого нужно стилизовать; переход между стилями с помощью transition невозможен.

Свойство text-decoration-style входит в число свойств CSS3.

Начальное значение	solid
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	object.style.textDecorationStyle = "dotted";

Синтаксис

Значения CSS text-decoration-style

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

Пример свойства text-decoration-style:

Пример text-decoration-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства text-decoration-style со значением «wavy»:

Пример кода text-decoration-style wavy

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Попробуйте сами »

Пример свойства text-decoration-style со значением «dotted»:

Пример кода text-decoration-style dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dotted;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Попробуйте сами »

Пример свойства text-decoration-style со значением «dashed»:

Пример кода text-decoration-style dashed

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dashed;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства text-decoration-style со значением «double»:

Пример кода text-decoration-style double

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline underline;
        text-decoration-style: double;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства text-decoration-style со всеми значениями:

Пример text-decoration-style со всеми значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: overline underline;
        text-decoration-style: solid;
      }
      div.t2 {
        text-decoration-line: line-through;
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
      div.t4 {
        text-decoration-line: overline;
        text-decoration-style: dashed;
      }
      div.t5 {
        text-decoration-line: line-through;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробовать
solid	Задаёт одиночную линию. Это значение по умолчанию.	Попробовать »
double	Задаёт двойную линию.	Попробовать »
dotted	Задаёт пунктирную линию из точек.	Попробовать »
dashed	Задаёт пунктирную линию из тире.	Попробовать »
wavy	Задаёт волнистую линию.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует значение свойства от родительского элемента.

Поддержка браузерами

text-decoration-style поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera). Стиль wavy в особенности отображается одинаково во всех них. Сегодня не нужны ни вендорные префиксы, ни запасные варианты; в браузерах, которые не поддерживали это свойство, оформление просто откатывалось к сплошной линии, поэтому свойство всегда обеспечивало корректную деградацию.

Связанные свойства

text-decoration-line — определяет, какие линии отображаются (underline, overline, line-through).
text-decoration-color — задаёт цвет оформления.
text-decoration — сокращённое свойство, задающее линию, стиль и цвет в одном объявлении.

Практика

Какое из следующих значений является допустимым для свойства 'text-decoration-style' в CSS?

'none''solid''double''dotted''inherit''none-solid'