CSS-свойство outline
позволяет вам определить область контура вокруг элемента.
Контур — это линия, которая рисуется сразу за границей элемента. Контуры обычно используются для обозначения фокуса или активного состояния таких элементов как кнопки, ссылки, поля формы и т. д.
В этом разделе мы разберем, как установить стиль, цвет и ширину контура.
Как разница между Outlines и Borders
Контур (outline
) выглядит очень похожим на границу (border
), но имеет отличительные особенности:
- Контуры не занимают места, всегда располагаются над элементом и могут перекрывать другие элементы на странице;
- В отличие от границ, для контура не получится установить разные цвета или стили для каждой из сторон;
- Контуры не оказывают никакого влияния на окружающие элементы, кроме наложения;
- В отличие от границ, контуры не изменяют размер или положение элемента;
- Контуры могут быть не прямоугольными, но вы не можете создавать контуры в виде окружности.
Если вы наметите контур на элементе, он займет столько же места на веб-страницах, как если бы у вас не было на нем контура. Контур перекрывает поля margins (прозрачная область за пределами границы) и окружающие элементы.
Стилизация Outline
Свойство outline-style
устанавливает стиль контура элемента, например: solid
, dotted
и т. д.
Свойство outline-style
может иметь одно из следующих значений: none
, solid
, dashed
, dotted
, double
, inset
, outset
, groove
, и ridge
. Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей контура.

Значение none
не отображает контур. Значения inset
, outset
, groove
и ridge
создают 3D-подобный эффект, который зависит от значения цвета контура. Обычно этот эффект достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет контура.
Давайте попробуем следующий пример и посмотрим, как это работает:
h1 {
outline-style: dotted;
}
p {
outline-style: ridge;
}
Вы должны указать outline-style
, чтобы контур отображался вокруг элемента, потому что по умолчанию он имеет значение none
. Ширина или толщина контура по умолчанию является medium
, а цвет контура по умолчанию такой же, как и color
текста.
Свойство outline-width
Свойство outline-width
определяет ширину контура, добавляемого в элемент.
Посмотрим следующий пример, чтобы понять, как это на самом деле работает:
p {
outline-style: dashed;
outline-width: 10px;
}
Ширина контура может быть указана с использованием любого значения, например, px
, em
, rem
и т. д. Его также можно указать с помощью одного из трех ключевых слов: thin
, medium
, и thick
Процентные или отрицательные значения недопустимы — как и свойство border-width
.
Свойство outline-color
Свойство outline-color
устанавливает цвет контура элемента.
Это свойство принимает те же значения, что и свойство color
.
Следующие правила добавляют сплошной контур синего цвета вокруг абзацев.
p {
outline-style: solid;
outline-color: #0000ff;
}
CSS-свойство outline-width
или outline-color
не будут работать, если используются раздельно. Используйте свойство outline-style
, чтобы сначала установить стиль контура.
Сокращенное свойство outline
CSS-свойство outline
является кратким свойством для установки одного или нескольких отдельных свойств outline-style
, outline-width
и outline-color
в одном правиле.
Давайте посмотрим на следующий пример, чтобы понять, как он работает:
p {
outline: 5px solid #ff00ff;
}
Если значение для отдельного свойства outline
пропущено или не указано, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Например, если значение для свойства
отсутствует или не указано при установке контуров, свойство outline-color
color
элемента будет использоваться в качестве значения для контура элемента.
В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:
p {
color: green;
outline: 5px solid;
}
Но в случае
отсутствие значения не будет отображать контуры вообще, поскольку значением по умолчанию для этого свойства является outline-style
none
. В следующем примере контура не будет:
p {
outline: 5px #00ff00;
}
Удаление контура outline у активных ссылок
Свойство outline
используется для удаления контура вокруг активных ссылок.
Однако, рекомендуется применять некоторый альтернативный стиль, чтобы указать, что ссылка имеет фокус, т.к. на мобильных устройствах удобнее показывать какой элемент нажался.
Следующий пример показывает, как убрать контур у ссылок
a, a:acive, a:focus {
outline: none;
}