Перейти к содержанию

outline-color

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

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

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* <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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

Комментарии