> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання обведення до елементів

У налаштуваннях певних елементів ви можете увімкнути обведення (outline) по контуру та кастомізувати стиль, колір та товщину лінії, якою буде обведено той чи інший елемент.

|| ${color}[#FFA800](Примітка:) нині обведення можна додати до таких елементів: [фігура (прямокутник та круг)](https://help.weblium.com/uk/article/dodavannya-elementu-figura-r6eq3z/), [зображення](https://help.weblium.com/uk/article/dodavannya-zobrazhen-eq66kg/), [елементи колекції](https://help.weblium.com/uk/article/nalashtuvannya-elementiv-kolekciyi-4wu8qn/) та [колонки](https://help.weblium.com/uk/article/keruvannya-elementami-1ok28k/#3-dodavannya-kolonok-do-bloku).

**Зміст**:
* [Додавання обведення до елементів](#1-dodavannya-obvedennya-do-elementiv)
* [Додавання обведення до елементів колекції та колонок](#1-dodavannya-obvedennya-do-elementiv-kolekciyi-ta-kolonok)
* [Кастомізація лінії обведення](#1-kastomizaciya-liniyi-obvedennya)

# Додавання обведення до елементів

Для того, щоб застосувати обведення до фігури або зображення, необхідно:
1. Відкрити налаштування елементу:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-1-ukr_2mh6sr.png)
2. Перейти до вкладки **Стиль**, прокрутити меню вниз та активувати перемикач **Обведення**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-2-ukr_r39zkw.png)
Після цього в обраному елементі з’явиться стандартне обведення:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-3-vsi_1jyp19j.png)
# Додавання обведення до елементів колекції та колонок

### Обведення для елементів колекції
Для того, щоб увімкнути функцію обведення в елементах колекції, необхідно відкрити налаштування елементу колекції, обрати вкладку **Стиль** та активувати перемикач **Обведення**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr1_3ofuw5.png)
||| ${color}[#f97700](Важливо:) додати обведення для елементів колекції можливо лише за умови, якщо для них було [встановлено фон або активовано пресети](https://help.weblium.com/uk/article/nalashtuvannya-elementiv-kolekciyi-4wu8qn/#3-zmina-fonu-elementiv). Якщо було обрано пресет “Багатоколірний” (окремий фон для кожного елементу колекції), то обведення буде застосовано лише до тих елементів, яким задано фон.
|| ${color}[#ffa800](Примітка:) якщо ви створили сайт за допомогою шаблона, у якому вже були наявні обведення у елементах колекції, то застосовані за цією інструкцією обведення матимуть перевагу (відображатимуться замість старих).
| ${color}[#1aa900](Підказка:) після активації перемикача "Обведення", воно буде автоматично додано **до всіх карток в колекції**.

### Обведення для колонок
Функція обведення активується у налаштуваннях колонки аналогічно як і у елементах колекції. Але при цьому обведення застосовується **окремо для кожної** колонки.

# Кастомізація лінії обведення

Лінію довкола елемента можна налаштувати на свій лад:

1. Вибір товщини лінії обведення:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-4-ukr_14q868w.png)
| ${color}[#1AA900](Підказка:) за замовчуванням товщина складає 2 пікселя, максимальна товщина — 30 пікселів.

2. Вибір стилю лінії обведення:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-5-ukr_1y7ev7n.png)
На вибір доступно три стилі: суцільна, штрихова та пунктирна.

|| ${color}[#FFA800](Примітка:) у штриховій та пунктирній лініях обведення простір між штрихами/крапками є прозорим. Тобто між кожною лінією або точкою обведення буде видно фон за елементом, а не сам елемент.
| ${color}[#1AA900](Підказка:) після додавання обведення видима частина елементу стане меншою, адже обведення не збільшує розміри елемента у пікселях. Якщо ви додаєте дуже ширике обведення, то за потреби можете зробити більшим, щоб, наприклад, була видимою та сама частина зображення, що відображалася до застосування обведення. 

3. Вибір кольору лінії обведення:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-6-ukr_ue437p.png)
Можна обрати як один зі стандартних кольорів [палітри сайту](https://help.weblium.com/uk/article/kolorova-palitra-sajtu-j3die1/), так і будь-який інший колір на власний розсуд.

Після налаштування усіх параметрів, обведення може набути, наприклад, наступного вигляду:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-7-vsi_a1rlq9.png)
Не забудьте [опублікувати](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/) сайт для застосування нещодавно внесених змін.

||| ${color}[#F97700](Для просунутих користувачів:) технічно обведення — це границя, яка додається всередину елементу, без збільшення його розмірів. Тобто елемент, до якого додано обведення, має CSS-властивість `box-sizing` зі значенням `border-box`.