CSS свойство outline-color

Свойство outline-color определяет цвет линии.

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

Можно установить цветовые коды hexadecimal, RGB, RGBA, HSL, HSLA или названия цветов как значение для свойства outline-color. Смотрите цветовые значения в разделе цвета HTML.

Значение по умолчанию invert
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Цвет анимируем..
Версия CSS2
DOM синтаксис object.style.outlineColor = "#8ebf42";

Синтаксис

outline-color: invert | color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border: 3px solid #ccc;
      outline-style: double;
      outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства outline-color</h2>
    <p>Применено значение по умолчанию invert.</p>
  </body>
</html>

Пример, где установлены цветовые коды hexadecimal, RGB, RGBA, HSL, HSLA:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .p1{
      outline-style: solid;
      outline-color: #1c87c9;
      }
      .p2{
      outline-style: solid;
      outline-color: hsl(65, 100%, 50%);
      }
      .p3{
      outline-style: solid;
      outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4{
      outline-style: solid;
      outline-color: rgb( 224, 0, 0);
      }
      .p5{
      outline-style: solid;
      outline-color: rgba(204,204,204,1);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства outline-color</h2>
    <p class="p1">Параграф, где установлено значение hexadecimal blue</p>
    <p class="p2">Параграф, где установлено значение hsl yellow.</p>
    <p class="p3">Параграф, где установлено значение hsla green.</p>
    <p class="p4">Параграф, где установлено значение rgb red.</p>
    <p class="p5">Параграф, где установлено значение rgba grey.</p>
  </body>
</html>

Значения

Значение Описание
invert Инвертирует цвет, примененный для фона. Это значение обеспечивает видимость линии, независимо от фонового цвета. Значение по умолчанию.
color Устанавливает цвет линии. Могут быть применены названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 1.2+ 7.0+

Практикуйте свои знания

Какие значения можно использовать для свойства 'outline-color' в CSS?
Считаете ли это полезным?