outline-color

Отдельное свойство для управления цветом обводки элемента

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство outline-color задаёт цвет обводки элемента. Аналог свойства border-color для цвета рамки.

Не наследуется. Часто используется в шорткате outline, где цвет обводки указывается наряду с толщиной и стилем.

Пример

Секция статьи "Пример"
        
          
          <div>Пример блока с обводкой</div>
          <div>Пример блока с обводкой</div>

        
        
          
        
      
        
          
          div {  outline: 1px solid;  outline-color: tomato;}
          div {
  outline: 1px solid;
  outline-color: tomato;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Цвет обводки можно задать в любом доступном формате, включая transparent.

Также применимы любые глобальные ключевые слова.

По умолчанию цвет обводки равен currentColor — совпадает с цветом текста элемента.

В отличие от border-color, нельзя прописать сразу несколько значений. Цвет обводки у элемента единый по всем четырём сторонам.

Открыть демо в новой вкладке

Взаимодействие с :focus-visible

Секция статьи "Взаимодействие с :focus-visible"

Обводка используется для визуального выделения элемента, когда мы переводим на него фокус, используя клавиатуру.

Мы можем задать своё значение outline-color для интерактивных элементов на странице. Например, когда стандартный цвет обводки выбивается из общей стилистики сайта.

Открыть демо в новой вкладке

Анимация

Секция статьи "Анимация"

Для плавного изменения цвета можно использовать как transition, так и animation.

Открыть демо в новой вкладке