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