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

Границы

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

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

Добавление границ элементу

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

Параметры границ

Цвет границы

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

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

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

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

  • сплошная (Solid)
  • пунктирная (Dashed)
  • точечная (Dotted)

По умолчанию стили для границы не заданы. Чтобы граница отображалась, задайте её стиль и ширину.

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

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

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

Добавление границы вверху

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

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

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

Настройки радиуса закругления

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

Установив значение закругления углов 50% для квадратного элемента, вы измените его форму на круг, а для прямоугольного — на эллипс.

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

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

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

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

Настройка индивидуального радиуса для разных углов