outline-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

CSS-свойство outline-color задаёт цвет обводки элемента.

Интерактивный пример

Синтаксис

css
/* Ключевые слова */
outline-color: invert;

/* Значения типа <color> */
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/* Глобальные значения */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

Свойство outline-color может быть иметь одно из перечисленных ниже значений.

Значения

<color>

Цвет обводки, определённый в формате типа <color>.

invert

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

Описание

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

При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством outline.

Проблемы, связанные с доступностью

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

Коэффициент контрастности цвета определяется путём сравнения значений светлоты цвета текста и фона. Согласно руководству по обеспечению доступности веб-контента (WCAG)), коэффициент контрастности должен быть 4,5:1 для обычного текста, и 3:1 для крупного текста, например, заголовков. Под крупным текстом понимается размер от 18,66px с полужирным начертанием или более крупный, либо от 24px и крупнее.

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

Начальное значениеauto
Применяется квсе элементы
Наследуетсянет
Обработка значенияДля ключевого слова auto, значение - currentcolor. Для значения цвета, если значение имеет прозрачность, соответственно, значение будет через rgba(). Если это не так, это будет rgb(). Ключевое слово transparent отображается, как rgba(0,0,0,0).
Animation typeцвет

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

outline-color = 
  auto        |
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Элемент с обводкой в виде сплошной линии синего цвета

HTML

html
<p>У меня синяя обводка.</p>

CSS

css
p {
  outline: 2px solid; /* Толщина и стиль обводки */
  outline-color: #0000ff; /* Синий цвет обводки */
  margin: 5px;
}

Результат

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

Specification
CSS Basic User Interface Module Level 4
# outline-color

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

BCD tables only load in the browser

Смотрите также