Генератор скруглений и фигур
Настройте горизонтальные и вертикальные радиусы четырёх углов в px или % и просмотрите форму. Скопируйте или сохраните созданный CSS border-radius. Ширина, высота и цвет предварительного просмотра в CSS не входят.
Возможности
Настройка скругления по шаблону
Выберите один из 8 шаблонов, включая скруглённые углы, капсулу и лист, и настройте радиусы. При выборе шаблона заменяются радиусы и единица измерения.
Разное скругление каждого из четырёх углов
Отключите одинаковые радиусы, чтобы отдельно задать горизонтальный и вертикальный радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.
Проверка и получение CSS
Проверьте форму и создайте CSS. Выберите сокращённую запись или объявления для каждого угла, затем скопируйте код или сохраните его в файле CSS.
Как пользоваться
Выберите шаблон и единицу измерения
Введите радиусы вручную или выберите шаблон для настройки. При смене единицы измерения числа не преобразуются.
Сравните скругление и форму
Введите одно значение, чтобы задать одинаковый радиус. Чтобы изменить радиус отдельного угла, снимите флажок и настройте горизонтальные и вертикальные значения.
При необходимости проверьте размер
В настройках предварительного просмотра можно изменить ширину, высоту и цвет. Эти значения не входят в итоговый CSS.
Создайте CSS, затем скопируйте или сохраните его
Нажмите «Создать CSS» и выберите нужный формат. Если вы меняете радиусы, единицу измерения или размер, создайте CSS заново.
Когда пригодится
Форма углов карточек и кнопок
Создайте CSS для компонентов страницы с одинаковым скруглением всех четырёх углов или только верхних углов.
Создание асимметричного скруглённого фона
Изменяйте горизонтальное и вертикальное скругление каждого угла, чтобы создавать контуры в форме листьев и другие органические формы.
Связь радиусов, единиц измерения и размера отображения
Горизонтальное и вертикальное — два направления одного угла
Горизонтальный радиус задаёт скругление по горизонтали, вертикальный — по вертикали. Если любое из значений равно 0, угол не скругляется. Укажите четыре угла по часовой стрелке, начиная с верхнего левого.
% рассчитывается отдельно относительно ширины и высоты
Горизонтальные значения в процентах зависят от ширины элемента, вертикальные — от его высоты. Одинаковые числа выглядят по-разному на квадрате и на высоком или широком прямоугольнике. px задаёт длину напрямую.
Слишком большие радиусы пропорционально уменьшаются
Если сумма соседних радиусов превышает длину стороны, все 8 отображаемых радиусов пропорционально уменьшаются с общим коэффициентом. Введённые значения и созданный CSS не меняются. После создания результата можно посмотреть радиусы предварительного просмотра в дополнительных сведениях.
Какие контуры можно создать скруглением углов
Свойство border-radius создаёт на углах эллиптические кривые. С его помощью нельзя задать выемки или произвольные многоугольники. Шаблон «Сквиркл» приближает форму с помощью эллиптических углов, но не воспроизводит математическую кривую точно.
Часто задаваемые вопросы
Можно ли задать разное скругление для каждого угла?
Да. Снимите флажок «Одинаковый радиус для всех углов», чтобы отдельно задать горизонтальный и вертикальный радиус каждого угла. При повторном включении для всех радиусов устанавливается горизонтальный радиус верхнего левого угла.
Преобразуются ли числа при смене единицы измерения?
Нет. Числа сохраняются, меняется только единица измерения. Если после переключения с px на % осталось значение больше 100, введите его заново в диапазоне от 0 до 100.
Включены ли размер и цвет предварительного просмотра в CSS?
Нет. Результат содержит только объявления border-radius. Задайте ширину, высоту и цвет фона страницы или компонента, где используется код.
Почему углы на экране скруглены меньше, чем введённые радиусы?
Браузер пропорционально уменьшает отображаемые радиусы, чтобы кривые углов не перекрывались. Коэффициент уменьшения и значения px для каждого угла можно посмотреть в разделе «Радиусы для отображения».
Ввод и результаты
- Радиусы
- Укажите все 8 значений в одной единице измерения: от 0 до 100% или от 0 до 9999 пикселей. Допускаются дробные значения.
- Предварительный просмотр
- Ширина и высота предварительного просмотра — целые числа от 1 до 400 пикселей. Если ширина не помещается, содержимое поля можно прокручивать по горизонтали.
- Вывод
- Сокращённая запись border-radius или объявления для каждого из 4 углов. Скопируйте код или сохраните его в border-radius.css.
- Не включено
- Ширина, высота, цвет фона, экспорт изображения или SVG.