Генератор border-radius
Скругляйте углы и создавайте органические blob-формы.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
От классических скруглений до модных blob-форм
Режим 4 угла покрывает повседневность: кнопки, карточки, аватары. Режим blob использует синтаксис из восьми значений для мягких органических форм, очень популярных в иллюстрациях и декоративных фонах.
-
Выберите режим
4 угла для простого скругления, blob для органической формы.
-
Настройте ползунки
Кнопка «Случайно» создаёт уникальный blob одним кликом.
-
Скопируйте CSS
Полное свойство border-radius, готовое к вставке.
Синтаксис на двух примерах
| Режим | Сгенерированный CSS |
|---|---|
| 4 равных угла | border-radius: 16px; |
| Blob по умолчанию | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| До косой черты / | Горизонтальные радиусы 4 углов |
| После косой черты / | Вертикальные радиусы 4 углов |
Всё вычисляется в браузере. Чтобы обрезать изображение по форме, добавьте overflow: hidden на контейнер.
Частые вопросы
Как скруглить только один угол?
В режиме «4 угла» настройте ползунок нужного угла, а остальные оставьте на 0. Сгенерированный CSS перечисляет радиусы в порядке верх-лево, верх-право, низ-право, низ-лево; когда все значения равны, инструмент пишет одно значение.
Что такое blob-синтаксис из восьми значений?
border-radius принимает горизонтальные и вертикальные радиусы, разделённые косой чертой «/». Например, «30% 70% 70% 30% / 30% 30% 70% 70%» задаёт четырём углам асимметричные радиусы — именно это создаёт мягкие органические формы.
Почему проценты, а не пиксели?
Проценты относятся к размеру элемента: blob сохраняет пропорции при любых размерах. Пиксели лучше для фиксированного скругления — кнопки или карточки с постоянными углами.
Обрезает ли border-radius содержимое?
Рамка и фон следуют скруглению, но дочернее содержимое может выходить за пределы. Добавьте «overflow: hidden» на элемент, чтобы изображения и содержимое обрезались по скруглённым углам.