outline¶

Универсальное свойство outline, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента.

В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Также нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам.

Демо¶

Интерфейс

Синтаксис¶

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

Значения¶

outline-color: Задаёт цвет линии в любом допустимом для CSS формате.
outline-style: Стиль линии.
outline-width: Толщина границы.

Значение по-умолчанию: Нет

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use outline? Data on support for the outline feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>outline</title>
    <style>
      .photo img {
        padding: 20px; /* Поля вокруг изображения */
        margin-right: 10px; /* Отступ справа */
        margin-bottom: 10px; /* Отступ снизу */
        outline: 1px solid #666; /* Параметры рамки */
        background: #f0f0f0; /* Цвет фона */
        float: left; /* Обтекание по правому краю */
      }
    </style>
  </head>
  <body>
    <div class="photo">
      <img src="image/girl.jpg" alt="Девочка с муфтой" />
      <img src="image/owl.jpg" alt="Сова" />
      <img src="image/boy.jpg" alt="Эвенкийский мальчик" />
    </div>
  </body>
</html>