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	Значение элемента наследуется от родительского элемента.