outline-color¶

Свойство outline-color указывает цвет внешней границы элемента.

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

Демо¶

Интерфейс

Синтаксис¶

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/* Keyword value */
outline-color: invert;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Значения¶

invert: Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color.
<цвет>: Задаёт цвет линии в любом допустимом для CSS формате.

Примечание¶

Chrome, Android и Safari не поддерживают значение invert.

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

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

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

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

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-color</title>
    <style>
      .block {
        outline-style: dashed; /* Пунктирная граница */
        outline-color: #be8b5e; /* Цвет границы */
        padding: 10px; /* Поля вокруг текста */
        background: #eedac8; /* Цвет фона */
      }
    </style>
  </head>
  <body>
    <div class="block">
      Воображение, на первый взгляд, начинает конструктивный
      классицизм.
    </div>
  </body>
</html>