Border Radius Generator

Об этом инструменте

Свойство border-radius скругляет углы элемента. Если все четыре значения равны, используется сокращённая запись с одним значением. Разные значения создают асимметричные формы — капсула использует 50% на всех углах, лист чередует 0% и 50%.

Нажмите на число угла, чтобы ввести значение напрямую, или перетащите связанный ползунок для изменения всех четырёх углов одновременно. Снимите флажок Зафиксировать все углы для независимого управления каждым углом.

Как использовать

1. Введите значения в четыре поля углов (верхний-левый, верхний-правый, нижний-левый, нижний-правый).
2. Включите Зафиксировать все углы для одновременной установки всех четырёх значений ползунком.
3. Переключайтесь между px и % в зависимости от потребностей дизайна.
4. Нажмите на пресет (Капсула, Лист, Блоб и т.д.), чтобы мгновенно применить предустановленную форму.

Случаи использования

UI-дизайнеры используют border-radius для создания кнопок, карточек и форм аватаров. Разработчики настраивают скруглённые углы под брендовые системы дизайна. Форма капсулы (50%) часто применяется для тегов и бейджей. Асимметричные значения создают органические формы листа или блоба для декоративных элементов.

Частые вопросы

• В чём разница между px и %? — px задаёт фиксированный радиус угла независимо от размера элемента. % задаётся относительно ширины и высоты элемента — 50% на всех углах создаёт идеальный круг (если элемент квадратный).
• Можно ли задать разные радиусы для каждого угла? — Да. Снимите флажок Зафиксировать все углы и введите разные значения в поля каждого угла.
• Что означает сокращённый вывод? — Если все четыре угла равны, выводится одно значение. При различных значениях порядок CSS: верхний-левый, верхний-правый, нижний-правый, нижний-левый.