CSS outline — обведення поза межами елемента

Властивість outline задає зовнішній контур навколо елементу. Зовнішній контур не впливає на розміри елемента, на відмінну від звичайних кордонів (властивість border).

Ця властивість універсальна і дозволяє одночасно задавати наступні значення:

• outline-color
• outline-style
• outline-width

Значення можуть розташовуватися в будь-якій послідовності, також непотрібні значення можуть бути не вказані (наприклад: outline:solid #ff0000;), в такому випадку не вказане значення браузер встановить без задання.

Контури відрізняються від кордонів декількома якостіми:

• Контур, намальований навколо елемента, за межами його кордонів.
• Контур не займає простір.
• Контур може бути округлим.
• Не можна задати параметри на окремих сторонах контуру.

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

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

правити

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

правити

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

Синтаксис

outline: outline-color outline-style outline-width|initial|inherit;

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

outline-color

Встановлює колір контуру.

автор: Svitlana

правити

outline-style

Встановлює стиль контуру.

автор: Svitlana

правити

outline-width

Встановлює товщину контуру.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	94	88	16.4	80	94	8

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

Переглядач
	94	94	88	16.4

Приклади

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

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

p {
    outline: #00FF00 dotted thick;
    margin: 12px;
}

<p>border: 10px — сусіди роз'їхалися</p>
<div class="row">
  <div class="b">1</div>
  <div class="b bor">2</div>
  <div class="b">3</div>
</div>

<p>outline: 10px — ряд стоїть на місці</p>
<div class="row">
  <div class="b">1</div>
  <div class="b out">2</div>
  <div class="b">3</div>
</div>

body {
  font-family: monospace;
  font-size: 14px;
  padding: 12px;
}

p {
  margin: 22px 0 6px;
  color: #444;
}

.row {
  display: flex;
  gap: 14px;
}

.b {
  box-sizing: content-box;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background-color: #ffd166;
  color: #333;
}

.bor {
  border: 10px solid #c0392b;
}

.out {
  outline: 10px solid #c0392b;
}

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

<input type="number" class="input" min="0" value="16" id="width" onchange="change()"></input>

<select id="style" onchange="change()">
  <option value="none">none</option>
  <option value="hidden">hidden</option>
  <option value="dotted">dotted</option>
  <option value="dashed">dashed</option>
  <option value="solid">solid</option>
  <option value="double">double</option>
  <option value="groove">groove</option>
  <option value="ridge">ridge</option>
  <option value="inset">inset</option>
  <option value="outset">outset</option>
</select>

<input type="color" id="color" onchange="change()">

<hr>

<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;
}

#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() {
  block.style.outline = width.value + 'px ' + getNewValue(style) + ' ' + color.value;
}

function getNewValue(el) {
  var result = '';
  for (var i = 0; i < el.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (el.options[i].selected == true) {
      result = el.options[i].value;
    }
  }window.CP.exitedLoop(0);
  return result;
}
//# sourceURL=pen.js

<div class="block outline">
	<code>
		border: 8px solid #888;<br>
		<strong>outline: 16px solid #444;</strong>
	</code>
</div>

<div class="block">
	<code>
		border: 8px solid #888;<br>
	</code>
</div>

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