outline-color в CSS — колір зовнішнього контуру елемента

CSS властивість outline-color задає колір зовнішнього контуру елемента.

На відміну від кордону елемента (наприклад, встановлено за допомогою кордону або пов'язаних з ним властивостей), контур елемента не займає зайвого місця, і може бути не прямокутним.

Контур завжди знаходиться над блоком, і це не впливає на положення чи розмір елементу або інших елементів

правити

Загальний опис

правити

Порада

Завжди оголошуйте властивість outline-style перед властивістю outline-color. Спочатку ви маєте визначити тип контуру, а вже потім змінювати його колір.

автор: Svitlana правити

Порада

Для задання контуру зручніше використовувати універсальну властивість outline.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість outline-color може отримувати 4 значень:

invert

Виконує інверсію кольору. Контур буде видно, незалежно від кольору фону. Без задання.

автор: Svitlana

правити

color

Колір контуру в будь-якому допустимому для CSS форматі.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання.

автор: Svitlana

правити

inherit

Успадкує значення від батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1.2	7	12	8
<колір>	1.0	1.5	1.2	7.0	12.0	8.0
invert	Не підтримується	Не підтримується	Не підтримується	Не підтримується	12.0	9.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
<колір>	2.1		1.0	3.2
invert	Не підтримується		Не підтримується	Не підтримується

Приклади

+ запропонувати свій приклад у пісочниці

<p>Абзац із крапчастим зеленим контуром.</p>

p {
    outline-style: dotted;
    outline-color: #00ff00;
    margin: 12px;
}

<div class="block">
	<code>
		border: 8px solid #888;<br>
		Властивість <strong>outline-color</strong> за замовчуванням 
	</code>
</div>
<div class="block outline">
	<code>
		border: 8px solid #888;<br>
		<strong>outline-color: red;</strong>
	</code>
</div>

.block {
	padding: 36px;
	text-align: center;
	border: 8px solid #888;
	outline-width: 16px;
	outline-style: solid;
	background-color: #eee;
	width: 300px;
	margin: 36px;
	font-size: 18px;
}
.outline{
  	outline-color: red;
}

<p>Вибери потрібне значення для <code>outline-color</code>:</p>

<input type="color" class="input" id="val" onchange="change(this.value)"></input>

<div id="block"></div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
  counter-reset: chapter 2;
}

.input {
  margin-bottom: 16px;
  padding: 1px;
  font-size: 13px;
}

#block {
  padding: 36px;
  width: 275px;
  margin: 75px auto 0 auto;
  border: 8px solid #666;
  outline: 16px solid #000;
  transition: all .15s ease-in;
}

function change(val) {
  block.style.outlineColor = val;
}
//# sourceURL=pen.js

<div class="row">
    <span class="bx only-color">лише колір — контуру немає</span>
    <span class="bx with-style">колір і стиль — червоний</span>
</div>

<div class="row">
    <span class="bx shorthand-after">outline після кольору — чорний</span>
    <span class="bx shorthand-before">outline перед кольором — червоний</span>
</div>

<div class="row">
    <span class="bx auto-style">стиль auto — колір проігноровано</span>
    <span class="bx rounded">контур повторює заокруглення</span>
</div>

<p class="cap">Обідок фокуса — власного кольору:</p>
<input class="field" type="text" value="клацніть сюди або натисніть Tab">

.row {
    margin-bottom: 22px;
}

.bx {
    display: inline-block;
    margin-right: 26px;
    padding: 8px 10px;
    background: #eef1f5;
    font: 13px/1.3 system-ui, sans-serif;
}

.only-color {
    outline-color: #c0392b;
}

.with-style {
    outline-color: #c0392b;
    outline-style: solid;
    outline-width: 3px;
}

.shorthand-after {
    outline-color: #c0392b;
    outline: 3px solid;
}

.shorthand-before {
    outline: 3px solid;
    outline-color: #c0392b;
}

.auto-style {
    outline: 4px auto #c0392b;
}

.rounded {
    border-radius: 14px;
    outline: 3px solid #72b043;
    outline-offset: 4px;
}

.cap {
    margin: 0 0 6px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.field {
    width: 280px;
    padding: 6px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    font: 14px system-ui, sans-serif;
}

.field:focus {
    outline: 3px solid #c0392b;
    outline-offset: 3px;
}