Генератор CSS border-radius

Независимо настройте четыре угла элемента и мгновенно получите соответствующее значение CSS border-radius с живым предпросмотром.

Пример:

Как это работает

CSS-свойство border-radius может принимать до четырёх значений — по одному на угол, в порядке: верхний левый, верхний правый, нижний правый, нижний левый. Этот инструмент позволяет настраивать каждый угол независимо и визуализировать результат перед копированием кода.

Как создать идеально круглую или овальную форму?

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

Зачем использовать разные значения для разных углов?

Асимметричные углы позволяют создавать органические формы или эффект «капли воды», часто используемый для пузырей уведомлений или декоративных элементов.

Обработка 100% локально: расчёт полностью выполняется в вашем браузере через WebAssembly, без отправки каких-либо данных на сервер.