outline-color

Свойство 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, нельзя прописать сразу несколько значений. Цвет обводки у элемента единый по всем четырём сторонам.

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

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

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