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

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

1.0+ 12.0+ 1.5+ 1.2+ 7.0+


Считаете ли это полезным?

Похожие статьи