CSS-свойство outline устанавливает ширину, стиль и цвет для всех четырех сторон контура элемента. Это короткое свойство для установки отдельных свойств outline-width, outline-style, и outline-color.

Значение по умолчанию: Индивидуальные CSS-свойства
Применяется к: Все элементы
Наследование: Нет
Анимирование: Да, так как некоторые подсвойства являются анимируемыми. Анимируемые свойства
Версия: CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

outline: [ outline-width outline-style outline-color ] | initial | inherit

Если какое-либо свойство, указанное выше, отсутствует или пропущено, будет добавлено значение по умолчанию для этого свойства, если оно есть.

Примеры написания кода свойства outline:

p.one {
    outline: 2px solid #ff0000;
}
p.two {
    color: #00ff00;
    outline-top: 5px solid;
}

Если outline-color отсутствует или не указан (например, outline: 5px solid;), вместо него будет использоваться значение свойства color элемента.

Но, если не указан outline-style, пропуск значения приведет к тому, что контур вообще не будет отображаться, поскольку значением по умолчанию для свойства outline-style является none.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
outline-width Устанавливает ширину контура элемента.
outline-style Устанавливает стиль линии контура элемента.
outline-color Устанавливает цвет контура элемента.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента outline.

Поддержка браузеров

Свойство outline поддерживается во всех основных браузерах.

Internet Explorer 7 и более ранние версии не поддерживают свойство outline. IE8, однако, поддерживает это свойство, но требует допустимого <!DOCTYPE>.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.