outline: контур без изменения размеров
outline рисует контур вокруг элемента без участия в расчёте его размеров и часто используется для обозначения клавиатурного фокуса.
Назначение
outline рисует контур вокруг элемента без участия в расчёте его размеров и часто используется для обозначения клавиатурного фокуса.
Как это работает
В отличие от border контур не добавляется к модели ширины и высоты. Расстояние от элемента регулируется outline-offset. Контур может перекрываться соседями или обрезаться внешним контейнером.
Пример
<style>
button{padding:10px 18px}button:focus-visible{outline:3px solid #11694e;outline-offset:4px}
</style>
<button type="button">Первая кнопка</button> <button type="button">Вторая кнопка</button>Что должно получиться
При клавиатурном фокусе появляется внешний контур, а кнопки не сдвигаются. Правило применяется к состоянию focus-visible, поэтому обычный клик может выглядеть иначе.
Граница применения и частая ошибка
Не удаляйте outline без равноценной заметной замены. Пользователь клавиатуры должен понимать, какой элемент получит действие после Enter или Space.
Самостоятельная проверка
Пройдите две кнопки клавишей Tab. Проверьте видимость контура на светлом и тёмном фоне, а также внутри контейнера с overflow:hidden.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.