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	Значение элемента наследуется от родительского элемента.