Об этом инструменте
Скруглённые углы задают тон интерфейсу, а border-radius умеет гораздо больше, чем одно одинаковое значение. Этот генератор позволяет скруглять каждый угол по отдельности и использовать полный синтаксис из восьми значений (горизонталь/вертикаль), чтобы создавать мягкие органические формы-«блобы», совсем не похожие на обычный прямоугольник.
Тяните ползунки, смотрите, как форма обновляется вживую, и копируйте CSS border-radius. Всё работает в браузере.
Частые вопросы
В чём разница между связанным режимом и режимом по углам?
Связанный режим применяет один и тот же радиус в пикселях ко всем четырём углам; сняв флажок, вы переключаетесь в режим по углам, где задаёте отдельный горизонтальный и вертикальный процент для каждого угла.
Можно ли создать эллиптические (не круглые) углы?
Да. Переключитесь в режим по углам и задайте разные проценты по горизонтали и вертикали — CSS border-radius поддерживает два радиуса на угол, и этот инструмент открывает доступ к обоим.
Как сделать идеальный круг или форму таблетки?
Для круга задайте единый радиус равным 50% от ширины/высоты элемента (или используйте режим по углам 50%/50%); для формы таблетки задайте радиус не менее половины высоты элемента.
Загружается ли мой дизайн куда-либо?
Нет. Поле предпросмотра и сгенерированный CSS вычисляются исключительно локально в вашем браузере.
Почему в CSS иногда появляется косая черта (/)?
Косая черта разделяет горизонтальные и вертикальные радиусы (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — это встречается только в режиме по углам, поскольку связанному режиму достаточно одного значения.