CSS свойство outline

Свойство outline устанавливает дополнительную рамку вокруг элемента.

outline применяется сразу для всех сторон. Свойство outline похоже на border, но есть множество различий между ними.

В случае границ есть возможность округлить их при помощи свойства border-radius, а при свойстве outline у нас нет такой возможности.

С помощь outline можно создать несколько границ вокруг элемента. Outline - это сокращенное свойство для:

  • outline-width
  • outline-style
  • outline-color

Свойство outline-color не будет работать, если оно применено отдельно.

Толщина и высота элемента не включают толщину линии. Толщина линии должна быть установлена отдельно.

Значение по умолчанию medium invert color
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Линия элемента анимируема.
Версия CSS2
DOM синтаксис object.style.outline = "#eee dashed 10px";

Синтаксис

outline: outline-width | outline-style | outline-color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.dotted {outline:dotted;}
      p.dashed {outline: dashed;}
    </style>
  </head>
  <body>
    <h2>Пример свойства outline</h2>
    <p class="dotted">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне.</p>
    <p class="dashed">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне.</p>
  </body>
</html>

В вышеприведенном примере для outline-style первого элемента задано значение dotted, а для второго - dashed.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.ex1 {
      outline-style: solid;
      outline-width: thick;  
      }
      div.ex2 {
      border: 1px solid #fc7f01;
      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>

Пример со свойством outline-color. Линия (outline) находится за пределами границы второго элемента:

Пример

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

Значения

Значение Описание
outline-width Устанавливает толщину линии.
outline-style Устанавливает стиль линии.
outline-color Устанавливает цвет линии.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

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

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

Какие свойства можно использовать для управления outline в CSS?
Считаете ли это полезным?