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

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

Контур — это линия, которая рисуется вокруг элемента. Однако он отличается от свойства border. Свойства width и height элемента не включают ширину контура, поскольку контур не считается частью размеров элемента.

INFO

Свойство outline-color не работает, если используется самостоятельно. Его необходимо использовать вместе со свойствами outline или outline-style.

В качестве значения для свойства outline-color можно задать шестнадцатеричный код, RGB, RGBA, HSL, HSLA или названия цветов. Подробнее о значениях цветов см. в разделе HTML colors.

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

Синтаксис

Синтаксис CSS outline-color

css

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

Пример свойства outline-color:

Пример кода CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS outline-color all values

Пример свойства outline-color с шестнадцатеричными, RGB, RGBA, HSL, HSLA цветами:

Пример всех значений CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Что верно относительно свойства Outline Color в CSS?

Свойство outline-color в CSS используется для установки цвета контура.Цвет контура можно задать во всех типах CSS.Установить цвет контура можно только в CSS3.Можно использовать различные значения цветов, такие как RGB, HEX, HSL и даже названия цветов.Значение по умолчанию свойства outline-color в CSS — 'invert'.Цвет контура всегда сплошной и не может использовать градиент.

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

Синтаксис ​

Пример свойства outline-color: ​

Результат ​

Пример свойства outline-color с шестнадцатеричными, RGB, RGBA, HSL, HSLA цветами: ​

Значения ​