outline-color ^CSS

Свойство outline-color указывает цвет внешней границы элемента.

В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Значение по умолчанию:

invert

Наследуется:

Нет

Применяется:

Ко всем элементам

Анимируется:

Да

Объект JavaScript:

object.style.outlineColor

Спецификации:

Поддержка браузерами:

Can I Use outline? Data on support for the outline feature across the major browsers from caniuse.com.

Синтаксис

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;

/* Keyword value */
outline-color: invert;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Значения

invert — Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color.
<цвет> — Задаёт цвет линии в любом допустимом для CSS формате.

Примечание

Chrome, Android и Safari не поддерживают значение invert.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-color</title>
  <style>
   .block {
    outline-style: dashed; /* Пунктирная граница */
    outline-color: #be8b5e; /* Цвет границы */
    padding: 10px; /* Поля вокруг текста */
    background: #eedac8; /* Цвет фона */
   }
  </style>
 </head> 
 <body> 
   <div class="block">
     Воображение, на первый взгляд, начинает конструктивный классицизм.
   </div>
 </body>
</html>

В начало

outline-color CSS