Границы и закругленные углы

Границы

Границы (Border) элемента используются для установки обводки вокруг него со всех сторон или выборочно.

Для настройки границ элемента нужно нажать + на вкладке Стилей в разделе Внешний вид → Границы.

Затем настройте параметры границ.

Цвет границы

Введите значение цвета (в формате Hex или RGB) или выберите цвет с помощью средства выбора цвета — пипетка (color picker). Также можно регулировать прозрачность цвета от 0 до 100%.

Ширина границы

Значение ширины устанавливается в пикселях px, em, rem, vh, vw.

Стиль границы

сплошная (Solid)

пунктирная (Dashed)

точечная (Dotted)

Стороны границ

Вы можете установить границы элемента со всех сторон или выборочно. По умолчанию выбран параметр установки границ со всех сторон.

Для установки границы с одной или нескольких сторон последовательно выбирайте нужные стороны и устанавливайте для каждой из них цвет, ширину и стиль границы. Вы можете установить для разных сторон разные параметры цвета, ширины и стиля.

С помощью установки разных границ для сторон можно добиться интересных эффектов. Например, можно сделать эффект выпуклой кнопки, установив широкую границу и изменив цвет границы с двух противоположных сторон.

Закругленные углы

Вы можете установить для элемента закругление углов, изменив таким образом его форму. Это можно сделать на вкладке Стилей в разделе Внешний вид → Радиус.

Значение можно выставить в пикселях px и в процентах %. Процент высчитывается от размеров элемента. Также вы можете задать значение скругления в em, rem, vh, vw.

По умолчанию закругление применяется ко всем углам элемента. Вы можете настроить индивидуальное значение закругления для каждого угла — это позволяет создавать уникальные формы. Для этого:

Кликните по кнопке Индивидуальный радиус

В раскрывшемся блоке параметров установите желаемый радиус для каждого угла