Контур

Контур похож на рамку, но устроен иначе. Он не добавляет элементу ни пикселя размера и не сдвигает соседей, поэтому его можно включать и выключать без прыжков вёрстки. Именно поэтому браузеры выбрали его для индикации фокуса: человек, который перемещается по странице клавишей Tab, видит, где он сейчас находится.

Свойство записывается как outline: 2px solid #1a73e8, а outline-offset отодвигает линию от края элемента наружу или внутрь. В современных браузерах контур повторяет скругление углов, заданное через border-radius; в старых версиях он оставался прямоугольным.

Чем отличается от границы

Граница элемента входит в блочную модель: увеличивает размер (если не задан box-sizing: border-box), может быть разной с каждой стороны, участвует в раскладке. Контур всегда одинаков со всех сторон, не влияет на размеры и может перекрывать соседние элементы. Для оформления используют границу, для временного выделения — контур.

Главная ошибка: outline: none

Многие темы и шаблоны убирают фокусную рамку, потому что дизайнеру не нравится синий контур после клика мышью. В итоге сайтом нельзя пользоваться с клавиатуры: непонятно, какая ссылка или поле сейчас активны. Это прямое нарушение требований доступности. Правильный путь — не удалять, а настроить:

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

Псевдокласс :focus-visible срабатывает тогда, когда браузер считает, что индикатор нужен: при навигации клавиатурой — да, при клике мышью по кнопке — обычно нет. Для полей ввода фокус показывается в обоих случаях, потому что человек собирается печатать.

Контур в режиме высокой контрастности

Иногда фокус оформляют тенью box-shadow вместо контура. В режиме принудительных цветов Windows тени отключаются, и индикатор пропадает. Простое страховочное решение — оставить прозрачный контур: outline: 2px solid transparent. В обычном режиме его не видно, а в контрастном система перекрашивает его в видимый цвет.