css властивість outline


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

Властивість `outline`

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

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

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

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

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

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

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

Синтаксис

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

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

outline-color

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

outline-style

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

outline-width

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

initial

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

inherit

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

Значення без задання: medium invert color
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.outline="#0000FF dotted 5px"

Переглядачі

Переглядач
outline

1.0

8.0

1.5

1.2

7.0

12.0

Переглядач
outline

1.0

1.0

3.1


Мобільних переглядачів ще не додано.

Приклади


Різні значення у дії

Приклад використання

Встановлення контуру навколо елемента

p { 


  outline: #00FF00 dotted thick; 


}

Додаткові посилання