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

правити

Переглядачі

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

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

Переглядач
outline	1.0	1.5	1.2	7.0	12.0	8.0

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

Переглядач
outline	1.0	1.0	3.1

Приклади

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

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

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