Границы и закругленные углы
Границы (Border) элемента используются для установки обводки вокруг него со всех сторон или выборочно.
Для настройки границ элемента нужно установить следующие параметры на вкладке Стилей правой панели в разделе Границы:
Цвет границы
Введите значение цвета (в формате Hex или RGB) или выберите цвет с помощью средства выбора цвета — пипетка (color picker). Также можно регулировать прозрачность цвета от 0 до 100%.
Ширина границы
Значение ширины устанавливается в пикселях px, em, rem, vh, vw.
Стиль границы
- сплошная (Solid)
- пунктирная (Dashed)
- точечная (Dotted)
По умолчанию стили для границы не заданы. Чтобы граница отображалась, задайте её стиль и ширину.
Стороны отображения границ
Вы можете установить границы элемента со всех сторон или выборочно. По умолчанию выбран параметр установки границ со всех сторон.
Для установки границы с одной или нескольких сторон последовательно выбирайте нужные стороны и устанавливайте для каждой из них цвет, ширину и стиль границы. Вы можете установить для разных сторон разные параметры цвета, ширины и стиля.
С помощью установки разных границ для сторон можно добиться интересных эффектов. Например, можно сделать эффект выпуклой кнопки, установив широкую границу и изменив цвет границы с двух противоположных сторон.
Вы можете установить для элемента закругление углов, изменив таким образом его форму. Это можно сделать на вкладке Стилей правой панели в разделе Размер:
По умолчанию закругление применяется ко всем углам элемента. Значение можно выставить в пикселях px и в процентах %. Процент высчитывается от размеров элемента. Также вы можете задать значение скругления в em, rem, vh, vw.
Установив значение закругления углов 50% для квадратного элемента, вы измените его форму на круг, а для прямоугольного — на эллипс.
Индивидуальное значение закругления для каждого угла позволяет создавать уникальные формы. Для этого:
- Кликните по кнопке Индивидуальный радиус
- В раскрывшемся блоке параметров установите желаемый радиус для каждого угла
