Генератор border-radius
Настройте border-radius для каждого угла независимо и смотрите, как форма меняется в реальном времени, затем скопируйте CSS.
Как это работает
Четыре ползунка, по одному на каждый угол, каждый мгновенно обновляет результат. При включённой опции «связать все углы» перемещение любого ползунка копирует значение в остальные три перед пересборкой CSS. Значения собираются в том же порядке, в котором их фактически использует CSS — по часовой стрелке, начиная с верхнего левого угла. Та же строка записывается напрямую в свойство style.borderRadius элемента предпросмотра, поэтому это не приближение результата, а именно тот CSS, который вы копируете.
Этот инструмент работает в пикселях, а пиксели ведут себя иначе, чем проценты: border-radius: 50% на прямоугольнике вычисляется отдельно для каждой оси и даёт эллипс, тогда как большое пиксельное значение вроде 9999px даёт форму «таблетки», которую обычно и ищут. Спецификация также ограничивает перекрывающиеся радиусы: когда сумма радиусов на одной стороне превышает длину этой стороны, браузер пропорционально уменьшает их.
Весь инструмент — это пара десятков строк JavaScript на этой странице. Значения перемещаются из DOM в предпросмотр и обратно в поле результата без какой-либо сетевой активности, что видно во вкладке «Сеть» инструментов разработчика.
Частые вопросы
В чём разница с указанием одного значения border-radius?
Одно значение скругляет все четыре угла одинаково. Этот инструмент позволяет настроить каждый угол независимо, что полезно для эффектов вроде карточки со скруглёнными только верхними углами или асимметричной формы «капли».
В каких единицах измерения работает инструмент?
В пикселях. Если вам нужны радиусы в процентах (для идеальных кругов/эллипсов независимо от размера элемента), придётся вручную скорректировать сгенерированный CSS, заменив px на % в каждом значении.
Отправляется ли это куда-либо?
Нет, предпросмотр и CSS создаются полностью в вашем браузере. Ничего не загружается.