CSS свойство outline-style

Свойство outline-style устанавливает стиль линии элемента.

Свойство outline-style имеет следующие значения:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.outlineStyle = "dotted"

Синтаксис

outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .p1{
      outline-style: solid;
      }
      .p2{
      outline-style: dashed;
      }
      .p3{
      outline-style: dotted;
      }
      .p4{
      outline-style: double;
      }
      .p5{
      outline-style: none; /*hidden*/
      }
      .p6{
      outline-style: groove;
      outline-color: #ccc;
      }
      .p7{
      outline-style: ridge;
      outline-color: #ccc;
      }
      .p8{
      outline-style: inset;
      outline-color: #ccc;
      }
      .p9{
      outline-style: outset;
      outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства outline</h2>
    <p class="p1">Параграф со значением solid.</p>
    <p class="p2">Параграф со значением dashed.</p>
    <p class="p3">Параграф со значением dotted.</p>
    <p class="p4">Параграф со значением double.</p>
    <p class="p5">Параграф со значением none.</p>
    <p class="p6">Параграф со значением groove.</p>
    <p class="p7">Параграф со значением ridge.</p>
    <p class="p8">Параграф со значением inset.</p>
    <p class="p9">Параграф со значением outset.</p>
  </body>
</html>

Пример с тремя значениями свойства outline:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.dotted {outline: 4px dotted gray;}
      p.dashed {outline: 0.2em dashed rgb(142,191,66);}
      p.solid {outline: 4px solid #ccc;}
      p.double {outline: 4px double #000;}
      p.groove {outline: 4px groove #666;}
      p.ridge {outline: thick ridge #1c87c9;}
      p.inset {outline: medium inset #1c87c9;}
      p.outset {outline:  4px outset #1c87c9;}
    </style>
  </head>
  <body>
    <h2>Пример свойства outline</h2>
    <p class="dotted">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="dashed">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="solid">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="double">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="groove">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="ridge">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="inset">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
    <p class="outset">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
  </body>
</html>

Значения

Значение Описание
none Линии отсутствуют. Значение по умолчанию
hidden Скрытая линия.
dotted Точечная линия.
dashed Пунктирная линия.
solid Сплошная линия.
double Двойная линия.
groove 3D рифленая линия.
ridge 3D рельефная линия.
inset 3D вдавленная линия.
outset 3D выпуклая линия.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 1.2+ 7.0+

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

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