Outline — це лінія, якою можна обвести той чи інший елемент. За допомогою outline можна виділити елемент посеред інших.

Зауважте, якщо об’єкт має одночасно outline і border, то останній буде знаходитись всередині outline. Взагалі outline має суттєву відмінність від border: він не є частиною елементу, а значить, висота і ширина елементу будуть розраховуватись без розмірів outline.

Цей елемент має чорний бордер і подвійний червоний контур шириною 10px

Стиль

Властивість outline-style визначає стиль контуру.

Для outline-style можливі наступні значення:

  • dotted — пунктирний точковий контур
  • dashed — пунктирний контур
  • solid — суцільний контур
  • double — подвійний контур
  • groove — об’ємний контур, вимагає outline-color
  • <code”>ridge — об’ємний контур із внутрішньою тінню, вимагає outline-color
  • inset —  об’ємний внутрішній контур, вимагає outline-color
  • outset — об’ємний зовнішній контур, вимагає outline-color
  • none — жодного контуру
  • hidden — прихований контур

Наступний приклад спочатку вказує тонкий чорний бордер для кожного елементу <p>, а потім додає різні стилі outline-style до кожного елементу:

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Ось що вийде в результаті:

dotted outline

dashed outline

solid outline

double outline

groove outline

ridge outline

inset outline

outset outline

Колір контуру

Властивість outline-color потрібна для зазначення кольору контурів.

Колір можна вказати за допомогою:

  • імені — вказати ім’я кольору, як-то red
  • RGB — вказати RGB, наприклад rgb(255,0,0)
  • Hex — за допомогою hex-значення, #ff0000
  • invert — створює контур з кольором, інвертованим з кольору фону.
p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Ширина контуру

Властивість outline-width допомагає вказати ширину контуру.

Значення може вказано у цифровому вигляді (in px, pt, cm, em тощо) або одним з трьох значень за замовчуванням: thin, medium або thick.

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Скорочений запис

Щоб скоротити код, можна вказувати контур в оодну лінію.

Для цього використовується властивість outline з такими параметрами:

  • outline-width
  • outline-style (необхідно)
  • outline-color

Ось приклад:

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

І ось результат:

контур

Підсумок

Властивість Опис
outline Додавання контуру з декларацією в одну лінію
outline-color Вказання кольору контуру
outline-offset Вказання відступу між контуром і бордером елементу
outline-style Вказання стилю контуру
outline-width Вказання ширини контуру

Коменти