w3docs logo

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

Свойство text-decoration-style устанавливает стиль текстового оформления.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок доумента</title>
    <style>
      div {
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-style</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением “wavy”:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-style</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "dotted":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: overline;
      text-decoration-style: dotted;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-style</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "dashed":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: overline;
      text-decoration-style: dashed;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-style</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "double":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-style</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      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</h2>
    <div class="t1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <br>
    <div class="t2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <br>
    <div class="t3">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <br>
    <div class="t4">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <br>
    <div class="t5">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Значения

Значение Описание
solid Одинарная линия. Значение по умолчанию.
double Двойная линия.
dotted Точечная линия.
dashed Пунктирная линия.
wavy Волнистая линия.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
57.0+ ✕ 36.0+ 12.1+ 44.0+

Практикуйте свои знания

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