Принципы работы свойства CSS border-radius
Свойство border-radius в CSS определяет, насколько сильно скругляются углы элемента. Инструмент «Генератор Border Radius» позволяет настраивать форму углов блока в интерактивном режиме. Вы можете управлять каждым углом отдельно или связать их вместе, а также выбирать между пикселями и процентами.
В генераторе предусмотрен эллиптический режим для создания мягких, органических форм. В этом режиме для каждого угла задаются отдельные горизонтальный и вертикальный радиусы. Все изменения мгновенно отображаются в области предварительного просмотра, а инструмент генерирует готовый CSS-код.
Настройки углов и единицы измерения
Интерфейс генератора сопоставляет четыре угла по часовой стрелке, начиная с верхнего левого:
- «Сверху слева»
- «Сверху справа»
- «Снизу справа»
- «Снизу слева»
Диапазон изменения параметров на ползунках составляет от 0 до 100. Начальное значение ползунка установлено на 24, что дает код border-radius: 24px;.
Выбор единиц измерения в поле «Единица» принципиально меняет логику расчета скругления:
- Пиксели (px): Угол скругляется на фиксированную величину. Этот вариант подходит, когда радиус должен оставаться неизменным независимо от размеров самого элемента.
- Проценты (%): Угол скругляется относительно размеров блока. Горизонтальный процент рассчитывается от ширины элемента, а вертикальный процент — от его высоты. Это позволяет создавать адаптивные скругления, меняющие форму при изменении пропорций блока.
Когда активна опция «Связать все углы», управление осуществляется одним ползунком «Все углы». Если эту опцию отключить, становятся доступны четыре отдельных ползунка для каждого угла.
Обычный и эллиптический режимы скругления
Когда опция «Эллиптические углы» отключена, каждый угол представляет собой четверть круга с единым радиусом. В этом случае для описания формы угла достаточно одного значения.
При включении опции «Эллиптические углы» активируется эллиптический режим. Для каждого из углов появляются два ползунка:
- «Горизонтальный»
- «Вертикальный»
Это позволяет создавать асимметричные скругления. В CSS-коде эллиптические радиусы записываются через косую черту (слэш), где сначала перечисляются горизонтальные радиусы, а затем — вертикальные. Как только углы снова становятся круглыми (значения горизонтального и вертикального радиусов совпадают), генератор автоматически возвращается к краткой форме записи без слэша.
Создание кругов, пилюль и сложных форм
С помощью точной настройки параметров можно быстро получать стандартные геометрические фигуры и сложные декоративные элементы:
- Идеальный круг: Чтобы превратить квадратный элемент в круг, необходимо связать все углы, переключить единицы измерения на проценты (%) и установить значение ползунка на 50%.
- Кнопка-пилюля: Для создания вытянутой кнопки с полностью округлыми боковыми сторонами используются пиксели (px). Достаточно перетащить ползунок угла дальше половины высоты элемента. В этом случае боковые стороны останутся идеально скругленными при любой ширине кнопки.
- Органические формы («кляксы»): Использование эллиптического режима с разными значениями горизонтальных и вертикальных радиусов для каждого угла позволяет уйти от строгой геометрии и создавать мягкие природные формы.
Для ускорения работы в генераторе предусмотрены готовые кнопки в блоке «Пресеты»:
- «Острый» — сбрасывает скругления углов.
- «Скругленный» — задает стандартное аккуратное скругление.
- «Круг» — автоматически устанавливает значение 50% для всех углов.
- «Клякса» — создает сложную асимметричную фигуру в эллиптическом режиме.
- «Лист» — скругляет только противоположные углы для имитации формы листа.
Применение сгенерированного CSS-кода
После настройки формы блока в поле под заголовком «CSS» отображается готовый код свойства border-radius. Кнопка «Скопировать CSS» позволяет в один клик перенести полученный код в буфер обмена для последующей вставки в таблицу стилей вашего веб-проекта.
Пример сгенерированного кода для обычного режима:
border-radius: 24px;
Пример кода со слэшем для эллиптического режима:
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
Конфиденциальность данных при работе с инструментом
Каждый угол отрисовывается прямо в вашем браузере. Никакие заданные вами параметры не отправляются на BroBroGo. Весь процесс генерации кода и визуализации изменений происходит локально на устройстве пользователя.
Часто задаваемые вопросы
Как работают настройки четырех углов и разница между px и %?
Четыре ползунка соответствуют углам по часовой стрелке: сверху слева, сверху справа, снизу справа и снизу слева. В пикселях угол скругляется на фиксированную величину; в процентах — относительно размеров блока (горизонтальный процент зависит от ширины, вертикальный — от высоты, поэтому 50% превращают квадрат в круг).
Что делает эллиптический режим?
Если этот режим выключен, каждый угол представляет собой четверть круга с одним радиусом. Включите его, и у каждого угла появятся отдельные горизонтальный и вертикальный радиусы — именно так создаются мягкие, органические формы-«кляксы». Генератор сам запишет код через косую черту (слэш) и вернется к краткой форме, как только углы снова станут круглыми.
Как сделать идеальный круг или кнопку-пилюлю?
Свяжите углы, переключите единицы измерения на проценты и установите значение 50%: квадрат превратится в круг. Для создания кнопки-пилюли оставьте пиксели и перетащите ползунок угла дальше половины высоты кнопки — боковые стороны останутся полностью скругленными при любой ширине. Пресет «Круг» настраивает первый вариант в один клик.