> ## 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).

# Добавление обводки к элементам

В настройках определенных элементов вы можете включить обводку по контуру и кастомизировать стиль, цвет и толщину линии, которой будет обведен тот или иной элемент.

|| ${color}[#FFA800](Примечание:) в настоящее время обводку можно добавить к следующим элементам: [фигура (прямоугольник и круг)](https://help.weblium.com/ru/article/dobavlenie-elementa-figura-bhyj1m/), [изображение](https://help.weblium.com/ru/article/dobavlenie-izobrazhenij-sho3qb/), [элементы коллекции](https://help.weblium.com/ru/article/nastrojki-elementov-kollekcii-7pzjpm/) и [колонки](https://help.weblium.com/ru/article/upravlenie-elementami-cwl3pb/#3-dobavlenie-kolonok-v-blok).

**Содержание**:
* [Добавление обводки к элементам](#1-dobavlenie-obvodki-k-elementam)
* [Добавление обводки к элементам коллекции и к колонкам](#1-dobavlenie-obvodki-k-elementam-kollekcii-i-k-kolonkam)
* [Кастомизация линии обводки](#1-kastomizaciya-linii-obvodki)

# Добавление обводки к элементам

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

### Обводка для элементов коллекции
Для того чтобы включить функцию обводки в элементах коллекции, необходимо открыть настройки элемента коллекции, выбрать вкладку **Стиль** и активировать переключатель **Обводка**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru1_1xdj4iz.png)
||| ${color}[#f97700](Важно:) добавить обводку для элементов коллекции возможно только при условии, если для них были [установлены фон или активированы пресеты](https://help.weblium.com/ru/article/nastrojki-elementov-kollekcii-7pzjpm/#3-izmenenie-fona-punktov-kollekcii). Если был выбран пресет “Многоцветный” (отдельный фон для каждого элемента коллекции), то обводка будет применена только к тем элементам, которым задан фон.
|| ${color}[#ffa800](Примечание:) если вы создали сайт с помощью шаблона, в котором уже были обводки в элементах коллекции, то применяемые по этой инструкции обводки будут иметь преимущество (отображаться вместо старых).
| ${color}[#1aa900](Подсказка:) после активации переключателя "Обводка", она будет автоматически добавлена **ко всем карточкам в коллекции**.

### Обводка для колонок
Функция обводки активируется в настройках колонки так же, как и в элементах коллекции. Но при этом обводка применяется **отдельно для каждой** колонки.

# Кастомизация линии обводки

Линию вокруг элемента можно настроить на свой лад:

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

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

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

3. Выбор цвета линии обводки:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-6-ru_1iik9ld.png)
Можно выбрать как один из стандартных цветов [палитры сайта](https://help.weblium.com/ru/article/cvetovaya-palitra-sajta-1cveou3/), так и любой другой цвет по своему усмотрению.

После настройки всех параметров, обводка может приобрести, например, следующий вид:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/obvedennya-7-vsi_1ozvjq5.png)
Не забудьте [опубликовать](https://help.weblium.com/ru/article/publikaciya-sajta-1xvrq6l/) сайт для применения недавно внесенных изменений.

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