Справочник · CSS

outline: обводка, которая не занимает место

outline рисуется поверх элемента и не сдвигает соседей. Ею показывают фокус.

Как это работает

В отличие от border, outline не входит в блочную модель и обычно не влияет на размеры. outline-offset отодвигает обводку от края. Не удаляй обводку фокуса у кнопки и поля, пока не заменил её своей. Для мыши обводку можно не показывать на каждом щелчке, для клавиатуры — нужно.

button:focus-visible {
  outline: 3px solid #e0a100;
  outline-offset: 3px;
}

Когда использовать

Фокус, ошибка поля, временная подсветка выбранной карточки. Не используй outline вместо обычной рамки карточки.

Частые ошибки

• Убрали outline: none и оставили клавиатуру без ориентира.
• Обводка сливается с фоном.
• offset такой большой, что обводка принадлежит уже чужому блоку.