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

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>

Комментарии