Генератор CSS border-radius
Генерируйте CSS border-radius с независимыми углами, эллиптическими радиусами X/Y, единицами px или % и blob-пресетами. Самая короткая запись.
Пресеты
Углы
Настройки предпросмотра
Предпросмотр
border-radius: 16px;
Похожие Инструменты
Просмотреть ВсеЧто такое Генератор border-radius?
Задавайте радиус каждого угла отдельно, при желании с разными горизонтальным и вертикальным радиусами для эллиптических углов, в px или %. Инструмент показывает форму и пишет самую короткую равнозначную запись border-radius.
Как пользоваться Генератор border-radius
- Выберите пресет (Rounded, Pill, Circle, Blob, Leaf, Ticket) или задайте значения сами.
- Выберите единицу (px или %) и включите эллиптические углы, если нужны отдельные радиусы X/Y.
- Настройте каждый угол (верхний левый, верхний правый, нижний правый, нижний левый); отметьте связывание углов, чтобы менять их вместе.
- Меняйте ширину, высоту и цвет в настройках предпросмотра, чтобы увидеть форму нужного размера.
- Скопируйте CSS-код.
Пример
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Горизонтальные радиусы стоят до косой черты, вертикальные после неё.
Когда использовать Генератор border-radius
Подходит для скруглённых карточек, «таблеток», аватаров и органических blob-форм на чистом CSS. Проценты масштабируются вместе с элементом (50% на квадрате даёт круг). Для произвольных многоугольников и форм с прямыми срезами используйте генератор clip-path; для сложных органических форм со многими точками генератор SVG-blob.
Как работает Генератор border-radius
Углы идут в порядке верхний левый, верхний правый, нижний правый, нижний левый, как требует CSS. Каждая группа из четырёх значений сокращается по стандартным правилам: четвёртое значение отбрасывается, если равно второму, третье, если равно первому, и второе, если равно первому. Для эллиптических углов вертикальные радиусы идут после косой черты (h / v); часть после неё опускается, если все вертикальные радиусы равны горизонтальным.
Распространенные Случаи Использования
- Кнопки и теги в форме таблетки
- Круглые аватары
- Органические blob-изображения с восемью значениями эллиптических радиусов
- Карточки в форме билета или листа
- Асимметричные углы для выносок с речью
Часто Задаваемые Вопросы
Что означает косая черта в border-radius?
Значения до черты это горизонтальные радиусы, а после неё вертикальные; вместе они дают эллиптические углы.
Почему 999px даёт форму таблетки?
Если радиусы больше рамки, браузер пропорционально уменьшает их все, поэтому огромное значение всегда даёт идеально круглые концы.
Что использовать: px или %?
px сохраняет одинаковую кривизну при любом размере; % считается от ширины (по горизонтали) и высоты (по вертикали) элемента, что нужно для кругов и blob-форм.