Создать аккаунт
Интерфейсы и CSSРаботает в браузере

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

Рассчитайте shorthand border-radius для четырёх углов и быстро проверьте геометрию панели, кнопки или карточки.

  • 4 угла
  • 0–240 px
  • Live preview
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

.rounded-panel {
  border-radius: 24px 24px 24px 24px;
}

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Введите radius для каждого угла в px.

  2. 2

    Проверьте форму в preview-блоке.

  3. 3

    Скопируйте готовый shorthand для CSS.

02

Что умеет инструмент

  • Top-left, top-right, bottom-right и bottom-left значения.
  • Bounded numeric validation от 0 до 240 px.
  • Короткий shorthand output в стандартном CSS порядке.
03

Когда пригодится

  • Подбор radius token для карточек и модальных окон.
  • Проверка асимметричной формы для UI-компонента.
  • Быстрое получение shorthand вместо четырёх ручных declarations.
04

Что происходит внутри

Порядок output: top-left, top-right, bottom-right, bottom-left.

Значения ограничены px, чтобы сохранить простой и проверяемый генератор.

05

Вопросы и ответы

Можно использовать проценты?

Нет. В этой версии поддерживаются только px-значения для стабильного preview и простого shorthand.

Почему порядок именно такой?

Это стандартный CSS shorthand порядок: top-left, top-right, bottom-right, bottom-left.