Справочник HTML & CSS

outline

Обводка вокруг элемента, которая не занимает места и не сдвигает соседей.

Синтаксис

outline: width style color;

Значения

Параметр	Тип	Описание
width	length	Толщина.
style	keyword	Вид, как у `border`: `solid`, `dashed`…
color	color	Цвет.
outline-offset	length	Отдельное свойство: промежуток между элементом и обводкой.

Примеры

Заметная обводка фокуса с отступом:

<style>
  a:focus-visible, button:focus-visible {
    outline: 3px solid darkorange;
    outline-offset: 3px;
  }
</style>
 
<p>Press Tab to move between these:</p>
<a href="#">A link</a> <button>A button</button>

Примечания

Браузер по умолчанию рисует обводку вокруг элемента в фокусе. outline: none без замены делает сайт непригодным для работы с клавиатуры. В отличие от рамки, обводка не меняет размер элемента.

См. также

border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
:focus-visible — Срабатывает у элемента в фокусе, когда браузер считает, что фокус нужно показать, — обычно после перехода с клавиатуры.

Вопросы и ответы по теме

В учебнике

Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.

Спасибо, что читаете!