Свойство outline задаёт дополнительную рамку вокруг элемента, за пределами его CSS-блока. 2 В стандартных стилях браузера outline используется для акцента на сфокусированных интерактивных элементах. 1
Некоторые особенности работы свойства outline в сочетании с другими стилями браузера:
- Сочетание с border. 1 При помощи сочетания border и outline можно создать множественную рамку вокруг элемента. 1
- Использование с outline-offset. 12 Это свойство позволяет регулировать отступ между границей и самим элементом. 4
- Использование для стилей :hover. 2 Outline не занимает места в блоке, поэтому его часто применяют для таких стилей, когда нужно выделить элемент, но чтобы при этом не менялась вёрстка страницы. 2
- Работа с многострочным текстом. 5 Некоторые браузеры отображают отдельную обводку для каждой строки, в то время как другие ограничиваются только одной обводкой для всего текста. 5
- Удаление стандартной обводки. 5 Установка значения 0 или none для outline удаляет стандартную браузерную обводку, появляющуюся при фокусе на элемент. 5