Свойство CSS `outline`

Сокращённое свойство outline CSS задаёт стиль, цвет и ширину внешней обводки элемента.

Попробуйте

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgb(170 50 220 / 0.6);
border-radius: 2rem;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  padding: 0.75rem;
  width: 80%;
  height: 100px;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• outline-width
• outline-style
• outline-color

Синтаксис

/* style */
outline: solid;

/* style | color */
outline: dashed #ff6666;

/* width | style */
outline: thick inset;

/* width | style | color*/
outline: 3px solid green;

/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

Значения

Для этого свойства указывается одно, два или три значения из следующего списка:

<'outline-width'>

Значение <line-width>, задающее толщину обводки. Если значение не указано, по умолчанию используется medium. См. outline-width.

<'outline-style'>

Задаёт стиль обводки. Если значение не указано, по умолчанию используется none. См. outline-style.

<'outline-color'>

Задаёт цвет обводки. По умолчанию используется invert в браузерах, поддерживающих это значение, и currentColor в остальных. См. outline-color.

Описание

Сокращённое свойство outline задаёт стиль, цвет и ширину внешней обводки элемента. Для него можно указать одно, два или три значения. Порядок значений не имеет значения. Все пропущенные подзначения устанавливаются в их начальное значение.

Для многих элементов обводка будет невидимой, если не задан её стиль. Это связано с тем, что по умолчанию используется none. Примечательное исключение составляют элементы input, которым браузеры задают стили по умолчанию.

Обводка — это линия за пределами границы элемента. В отличие от других областей блока, обводки не занимают места, поэтому никак не влияют на компоновку документа.

На внешний вид обводки влияют несколько свойств. Стиль, цвет и ширину можно изменить с помощью свойства outline, расстояние от границы — с помощью свойства outline-offset, а углы — с помощью свойства border-radius.

Обводка не обязательно должна быть прямоугольной: при работе с многострочным текстом одни браузеры рисуют отдельную обводку вокруг каждой строки, а другие обводят весь текст единой линией.

Доступность

Если задать свойству outline значение 0 или none, стандартный стиль фокуса браузера будет удалён. Если с элементом можно взаимодействовать, у него должен быть видимый индикатор фокуса. Если стандартный стиль фокуса удалён, задайте заметное оформление фокуса.

• Как создавать полезные и удобные индикаторы фокуса
• WCAG 2.1: Понимание критерия успеха 2.4.7: видимый фокус

Формальное определение

Формальный синтаксис

outline = 
  <'outline-width'> ||
  <'outline-style'> ||
  <'outline-color'>

Примеры

Использование outline для задания стиля фокуса

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #ee7733;
  outline-offset: 4px;
  background: #ffffaa;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• outline-width
• outline-style
• outline-color
• border