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

outline

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

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

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* 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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>

Комментарии