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>