Генератор CSS border-radius — Бесплатно Онлайн
Визуально генерируйте CSS border-radius.
Who uses the Генератор CSS border-radius?
- Frontend-разработчики, генерирующие значения border-radius для компонентов дизайн-системы.
- UI-дизайнеры, тестирующие варианты скругления углов для достижения нужного визуального веса.
- Начинающие изучать CSS, осваивающие свойства border-radius через интерактивное визуальное исследование.
How the Генератор CSS border-radius works
Используйте ползунки, чтобы независимо управлять радиусом каждого из четырёх углов.
Отметьте «Link all corners», чтобы все четыре ползунка двигались вместе для равномерного скругления.
Смотрите форму вживую на образце карточки.
Скопируйте сгенерированное значение CSS border-radius для прямого использования в таблице стилей.
Tips & tricks
- Снимите отметку «Link all corners», чтобы задать асимметричные углы — полезно для форм речевого пузыря или вкладок.
- Сгенерированный CSS использует один радиус на угол (border-radius: TL TR BR BL) — для эллиптических углов отредактируйте скопированное значение вручную, используя синтаксис с косой чертой.
- Порядок углов в сокращённой записи CSS всегда по часовой стрелке начиная с верхнего левого — это совпадает с подписями ползунков в этом инструменте.
- Очень большие значения радиуса на маленьком элементе визуально ограничиваются, как только углы встречаются посередине.
Frequently Asked Questions
Какая сокращённая запись CSS border-radius?
Одно значение: border-radius: 8px (все углы одинаковые). Четыре значения: border-radius: 10px 20px 30px 40px (верхний левый, верхний правый, нижний правый, нижний левый по часовой стрелке). Два значения: border-radius: 10px 20px (верхний-левый+нижний-правый, верхний-правый+нижний-левый).
Как сделать идеальный круг с помощью CSS?
Установите border-radius: 50% на квадратном элементе (равные ширина и высота). Для неквадратных элементов 50% создаёт эллипс. Используйте border-radius: 50% на div с совпадающими шириной и высотой для круга.
Что такое эллиптические радиусы границ?
CSS border-radius поддерживает отдельные горизонтальный и вертикальный радиусы для каждого угла через 8-значный синтаксис: border-radius: 10px 40px / 40px 10px создаёт органическую форму «капли». Этот инструмент не генерирует такой синтаксис — он управляет одним значением радиуса на угол.
Можно ли создавать органические формы «капли» с помощью border-radius?
Да, используя полный 8-значный синтаксис CSS (разные горизонтальный и вертикальный радиусы для каждого угла), написанный вручную. Этот инструмент охватывает более распространённый случай с одним радиусом на угол; для эллиптических/«капельных» форм пишите значение border-radius напрямую.
Какое значение создаёт типичные скруглённые углы «карточки»?
4–8px — стандарт для сдержанных карточек. 12–16px обычно для современных UI-карточек. 24px+ используется для элементов в стиле «pill» или «chip». Значения около 50 на маленькой карточке начинают выглядеть чрезмерно.
Is my data safe when using the Генератор CSS border-radius?
Completely safe. The Генератор CSS border-radius processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор CSS border-radius output in commercial projects?
Yes. The Генератор CSS border-radius is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор CSS border-radius follow official standards?
Yes. The Генератор CSS border-radius is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.