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

Свойство outline-width определяет толщину линии элемента.

Имеет следующие значения - medium, thick, thin.

Сначала необходимо установить свойство outline-style, а дальше - outline-width.

Значение по умолчанию	medium
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Да. Толщина линии анимируема.
Версия	CSS2
DOM синтаксис	Object.style.outlineWidth = "thick";

Синтаксис

outline-width: medium | thin | thick | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style>
      .p1{
      outline-style: solid;
      outline-width: 5px;
      }
      .p2{
      outline-style: solid;
      outline-width: 0.4em;
      }
      .p3{
      outline-style: solid;
      outline-width: thin;
      }
      .p4{
      outline-style: solid;
      outline-width: medium;
      }
      .p5{
      outline-style: solid;
      outline-width: thick;
      }
      .p6{
      outline-style: solid;
      outline-width: 0.1cm;
      }
      .p7{
      outline-style: solid;
      outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства outline-width</h2>
    <p class="p1">Параграф, где толщина линии равна 5px.</p>
    <p class="p2">Параграф, где толщина линии равна 0.5em.</p>
    <p class="p3">Параграф со значением thin.</p>
    <p class="p4">Параграф со значением medium.</p>
    <p class="p5">Параграф со значением thick.</p>
    <p class="p6">Параграф, где толщина линии равна 0.1cm.</p>
    <p class="p7">Параграф, где толщина линии равна 1 mm.</p>
  </body>
</html>

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

Пример, где первый элемент не имеет границ, а у второго имеются границы. Заметьте, что рамка второго элемента находится за пределами его границы:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.ex1 {
      outline-style: solid;
      outline-width: thick;  
      }
      div.ex2 {
      border: 2px solid #1c87c9;
      outline-style: solid;
      outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства outline</h2>
    <div class="ex1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <br>
    <div class="ex2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

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

Значения

Значение	Описание
medium	Устанавливает среднюю толщину линии. Значение по умолчанию.
thin	Устанавливает тонкую линию.
thick	Устанавливает толстую линию.
length	Устанавливает толщину линии в единицах измерения длины.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.