Скругление CSS-элемента с заданными радиусами

Онлайн-генератор выполняет скругление CSS-элемента с заданными радиусами, формируя готовые правила стилей для интерфейсной вёрстки и фронтенд-разработки. Инструмент избавляет от ручного подбора кривизны и написания длинных конструкций для каждого угла HTML-блока. Пользователь настраивает параметры визуально и сразу получает синтаксически верную строку кода. Это ускоряет стилизацию кнопок, карточек, контейнеров, изображений и сложных геометрических фигур.

В качестве входных данных используются четыре независимых числовых параметра: верхний левый, верхний правый, нижний правый и нижний левый углы. На выходе формируется валидное свойство border-radius с точными значениями для прямого копирования в таблицу стилей.

Генератор автоматически собирает указанные числа в лаконичную запись согласно спецификации CSS. Если все четыре угла имеют одинаковый радиус, итоговое правило сокращается до одного общего значения. При настройке асимметричных форм код фиксирует индивидуальные параметры для каждой стороны по часовой стрелке, начиная с левого верхнего угла. Полученный результат готов к вставке в селектор класса или инлайн-стили без дополнительной правки синтаксиса.

Настройка радиусов углов и генерация CSS-кода

Процесс формирования скругления строится на прямом сопоставлении четырех точек прямоугольного блока с их числовыми коэффициентами кривизны. Для получения готового правила задаются значения по отдельным направлениям, где каждый параметр отвечает за свою зону элемента:

• Верхний левый угол (Top left) - начальная точка отсчета, задающая скругление на стыке верхней и левой границ блока.
• Верхний правый угол (Top right) - параметр кривизны для пересечения верхней и правой сторон.
• Нижний правый угол (Bottom right) - числовое значение, формирующее дугу в правой нижней части контейнера.
• Нижний левый угол (Bottom left) - завершающий параметр, отвечающий за левую нижнюю вершину элемента.

При подстановке чисел для этих четырех позиций формируется итоговое CSS-правило. Если для всех направлений выбрано нулевое значение, углы остаются прямыми. Увеличение числа плавно смещает центр дуги внутрь элемента, сглаживая вершину. Комбинация одинаковых или разных величин сразу преобразуется в готовую строку свойства border-radius , которую остается перенести в код проекта.

Способы внедрения полученного правила в вёрстку

Сгенерированную строку стилей можно подключить к HTML-элементу несколькими стандартными методами в зависимости от архитектуры проекта и конкретной задачи.

Подключение через селектор класса во внешнем файле CSS

Базовый подход при разработке интерфейсов - вынесение правил в отдельную таблицу стилей. Сформированное свойство помещается внутрь фигурных скобок выбранного селектора класса. Это позволяет многократно применять одинаковое скругление к разным элементам на странице без дублирования кода.

.custom-card {
  border-radius: 16px 16px 8px 8px;
}

Размещение внутри тега style

Если стили нужно применить локально в пределах одного HTML-документа без редактирования внешних таблиц, правило записывается внутри контейнера <style> в шапке страницы. Синтаксис привязки к селектору остается таким же, как и во внешнем файле.

<style>
  .promo-banner {
    border-radius: 24px;
  }
</style>

Использование атрибута style для inline-стилей

Для точечного переопределения внешнего вида конкретного тега или при верстке электронных писем полученное CSS-правило вставляется напрямую в HTML-разметку через атрибут style . Такой способ имеет высокий приоритет и перекрывает правила, заданные через классы в таблицах стилей.

<div style="border-radius: 12px 0 12px 0;">Контент блока</div>

Динамическое управление скруглением через JavaScript

Когда кривизну углов требуется менять на лету в ответ на действия пользователя, скролл страницы или загрузку данных, свойством управляют через объектную модель документа. В JavaScript обращение к этому параметру происходит через свойство style.borderRadius у выбранного узла.

Так как в синтаксисе JavaScript дефисы в названиях свойств не допускаются, стандартное имя border-radius записывается в формате camelCase. Присваиваемое значение передается в виде обычной текстовой строки в кавычках.

const boxElement = document.querySelector('.interactive-box');
boxElement.style.borderRadius = '20px 10px 20px 10px';

Такой прием записывает сгенерированное значение напрямую в inline-стили элемента в момент выполнения скрипта. Сравнение всех четырех методов внедрения в зависимости от сценария использования приведено в таблице:

Синтаксис свойства border-radius и отдельных углов в CSS

Правила формирования скруглений регламентируются технической спецификацией модуля CSS Backgrounds and Borders уровня CSS3. Стандарт предусматривает как единую сокращенную запись (shorthand) для одновременного управления всеми углами контейнера, так и набор атомарных свойств для точечной модификации каждого угла в отдельности.

Сокращенная запись и порядок чтения значений

Базовое свойство border-radius принимает от одного до четырех числовых значений, разделенных пробелами. Интерпретация переданных параметров браузером строится по часовой стрелке, начиная с верхнего левого угла элемента. Если какое-либо из значений опущено, парсер вычисляет его по принципу диагональной симметрии, копируя параметр противоположного угла.

Распределение радиусов в зависимости от количества указанных аргументов подчиняется следующей логике:

Синтаксис CSS не допускает передачу отрицательных чисел в качестве радиуса. Нулевое значение ( 0 ) отменяет скругление и возвращает углу прямую форму, при этом указывать единицу измерения для нуля необязательно.

Индивидуальные свойства углов и наследование

Когда требуется переопределить скругление только одного или двух углов без сброса остальных параметров, вместо общего правила применяются длинные (longhand) свойства. В спецификации CSS3 каждому углу соответствует своя директива:

• border-top-left-radius - задает радиус для верхнего левого угла;
• border-top-right-radius - управляет верхним правым углом;
• border-bottom-right-radius - модифицирует нижний правый угол;
• border-bottom-left-radius - отвечает за нижний левый угол.

Каждое из этих четырех свойств принимает одно или два значения. Если указано одно число, угол скругляется симметрично по обеим осям. При передаче двух чисел через пробел первое значение задает горизонтальный радиус, а второе - вертикальный: например, правило border-top-left-radius: 30px 15px; сформирует в левом верхнем углу вытянутый по горизонтали скос.

По умолчанию параметры скругления не наследуются от родительского контейнера к дочерним блокам. Для принудительной передачи геометрии угла вложенному элементу используется глобальное ключевое слово inherit :

.parent-card {
  border-radius: 16px;
}

.child-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

Такая запись заставляет шапку карточки забрать значения верхних радиусов напрямую у родителя, сохраняя нижние углы прямыми.

Расширенный эллиптический синтаксис через слеш

В сокращенной записи border-radius для разделения горизонтальных и вертикальных радиусов используется символ прямого слеша ( / ). Это позволяет задать до восьми независимых значений в одной строке кода. Все параметры, расположенные слева от слеша, определяют горизонтальные полуоси углов, а параметры справа - вертикальные.

.complex-element {
  border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;
}

Обе группы значений (до и после разделителя) читаются по тому же правилу часовой стрелки, начиная с верхнего левого угла. Приведенная выше строка кода полностью эквивалентна следующему набору индивидуальных правил:

.complex-element {
  border-top-left-radius: 10px 15px;
  border-top-right-radius: 20px 25px;
  border-bottom-right-radius: 30px 35px;
  border-bottom-left-radius: 40px 45px;
}

Внутри каждой из двух групп действуют стандартные правила сокращения: например, при записи border-radius: 20px / 10px 40px; все четыре угла получат одинаковый горизонтальный радиус 20px , тогда как вертикальный радиус составит 10px для верхнего левого и нижнего правого углов, и 40px - для верхнего правого и нижнего левого. Обратите внимание на отличие в синтаксисе: в общем свойстве border-radius оси разделяются слешем, а в индивидуальных свойствах отдельных углов (таких как border-top-left-radius ) слеш не используется, и два значения пишутся просто через пробел.

Геометрия скругления, единицы измерения и расчет вложенных радиусов

С точки зрения геометрии скругление каждого угла HTML-элемента представляет собой построение четверти окружности или эллипса, вписанной в вершину прямоугольного блока. Кривизна этой дуги определяется двумя параметрами: горизонтальным и вертикальным радиусами. Когда оба значения для одного угла совпадают, центр кривизны равноудален от смежных сторон блока, и формируется дуга правильной окружности. Если горизонтальный и вертикальный радиусы различаются, вершина скругляется по дуге эллипса, вытянутого вдоль соответствующей стороны элемента.

При задании очень больших значений скругления действует геометрическое правило предотвращения пересечения дуг: сумма двух смежных радиусов на одной стороне не может превышать длину этой стороны. Если сумма горизонтальных радиусов верхнего левого и верхнего правого углов оказывается больше ширины самого блока, браузер пропорционально уменьшает все радиусы элемента до тех пор, пока дуги не перестанут перекрывать друг друга.

Сравнение единиц измерения: px, rem и проценты

Поведение угловой дуги при изменении размеров экрана или самого контейнера напрямую зависит от выбранных единиц измерения в CSS. Одни и те же числовые пропорции дают разный геометрический результат при использовании фиксированных, относительных шрифтовых или процентных величин.

В таблице ниже представлено сравнение основных единиц измерения, применяемых для задания радиуса скругления:

Ключевая особенность процентных значений ( % ) заключается в том, что горизонтальный радиус вычисляется в процентах от ширины элемента, а вертикальный - в процентах от его высоты. Поэтому запись border-radius: 20%; для прямоугольного контейнера размером 400px на 200px сформирует не круглое, а эллиптическое скругление с горизонтальной полуосью 80px (20% от 400px ) и вертикальной полуосью 40px (20% от 200px ). При использовании px или rem радиус остается одинаковым по обеим осям вне зависимости от пропорций самого прямоугольника.

Математический расчет вложенных скруглений

При размещении одного скругленного элемента внутри другого (например, контейнера с внутренним отступом и вложенного в него блока) возникает задача согласования их кривизны. Если задать родительскому и дочернему блокам одинаковый радиус в пикселях, дуги не будут концентрическими: в углах появится визуальное утолщение отступа, нарушающее оптический баланс интерфейса.

Для сохранения эквидистантности дуг (одинакового расстояния между контурами на всем протяжении изгиба) центры обеих окружностей должны совпадать. Математически это достигается по следующей формуле:

Rᵢ = Rₑ − E

Переменные в этом уравнении имеют следующие значения:

• Rᵢ - внутренний радиус скругления дочернего элемента.
• Rₑ - внешний радиус скругления родительского контейнера.
• E - расстояние между внешним и внутренним контурами, которое формируется за счет внутреннего отступа родителя ( padding ) или толщины его рамки ( border-width ).

Если внешний контейнер имеет радиус Rₑ = 24px и внутренний отступ padding: 8px , то для идеального геометрического совпадения углов дочернему элементу необходимо задать радиус Rᵢ = 24px − 8px = 16px .

.parent-box {
  border-radius: 24px;
  padding: 8px;
}

.child-box {
  border-radius: 16px;
}

В пограничных случаях, когда расстояние между контурами E больше или равно внешнему радиусу Rₑ (например, при Rₑ = 12px и padding: 16px ), результат вычитания становится нулевым или отрицательным ( 12 − 16 = −4 ). Поскольку отрицательные значения для border-radius невалидны, внутренний радиус дочернего блока в такой ситуации принимается равным 0px : внешнее скругление полностью гасится широким отступом, и внутренний элемент может оставаться прямоугольным без нарушения оптического баланса.

Построение базовых и сложных UI-форм с помощью скругления углов

В современном UI-дизайне скругление углов определяет визуальный характер интерфейса и задает иерархию объектов на экране. При разработке дизайн-систем и сборке библиотек компонентов для UI-kit фиксированные значения радиусов обычно стандартизируются и выносятся в отдельные токены скругления. Полученный CSS-код напрямую применяется к семантическим и базовым тегам вёрстки - контейнерам div , интерактивным элементам button , изображениям img и строчным бейджам на базе span . Комбинируя единицы измерения и соотношения сторон блока, из стандартного прямоугольного контейнера формируют как базовые интерфейсные модули, так и сложные декоративные фигуры.

Карточки, модальные окна и всплывающие подсказки

Для построения контейнеров с контентом - товарных карточек, модальных окон, выпадающих поповеров и компактных тултипов - применяется равномерное скругление всех четырех углов в абсолютных ( px ) или масштабируемых ( rem ) единицах. Использование этих единиц гарантирует, что геометрия углов останется стабильной и не деформируется при динамическом изменении высоты или ширины блока из-за разного объема текста.

В рамках одной дизайн-системы радиус обычно масштабируется пропорционально габаритам и уровню вложенности компонента:

• Мелкие интерфейсные элементы (тултипы, теги на базе span , чекбоксы) получают минимальный радиус от 4px до 6px (или 0.25rem - 0.375rem ).
• Средние блоки (карточки товаров, поля ввода, поповеры, стандартные кнопки button ) оформляются со скруглением от 8px до 12px ( 0.5rem - 0.75rem ).
• Крупные самостоятельные контейнеры (модальные окна, боковые панели, секционные блоки div ) требуют выраженного скругления в диапазоне 16px - 24px ( 1rem - 1.5rem ).

.tooltip-box {
  border-radius: 4px;
}

.product-card {
  border-radius: 12px;
}

.modal-window {
  border-radius: 20px;
}

Кнопки-капсулы и элементы в форме таблетки

Элементы управления с полностью скругленными боковыми сторонами - так называемые pill-кнопки, поисковые строки, счетчики уведомлений и статусные теги - требуют слияния верхнего и нижнего радиусов на каждом из торцов в единую полуокружность. Чтобы получить форму капсулы без предварительного подсчета точной высоты элемента в пикселях, свойству задают заведомо избыточное абсолютное значение, например 9999px или 100rem .

.pill-button {
  border-radius: 9999px;
  padding: 10px 24px;
}

Согласно спецификации CSS, если сумма двух смежных радиусов превышает длину стороны, к которой они примыкают, браузер пропорционально уменьшает все используемые радиусы до тех пор, пока они не перестанут перекрываться. В результате при значении 9999px фактический радиус скругления автоматически ограничивается ровно половиной текущей высоты кнопки (при условии, что ширина кнопки больше ее высоты). В отличие от записи border-radius: 50% , которая на вытянутом прямоугольнике создаст форму эллипса с пологими длинными сторонами, трюк с большим пиксельным значением оставляет верхнюю и нижнюю грани абсолютно прямыми и параллельными друг другу.

Круглые аватары и овальные изображения

Для превращения пользовательских аватаров, иконок статуса или превью галереи на базе тега img или обёртки div в замкнутую кривую без прямых участков используется значение 50% . Поскольку процентные радиусы рассчитываются от текущих габаритов самого блока, итоговая геометрическая фигура напрямую зависит от соотношения ширины и высоты элемента.

Если ширина и высота контейнера строго равны (квадрат, например 120px на 120px ), горизонтальный и вертикальный радиусы в каждом углу составят ровно половину стороны (по 60px ), что замкнет контур в идеальный круг. Если применить border-radius: 50% к прямоугольному блоку с разными сторонами (например, шириной 200px и высотой 100px ), каждый угол получит эллиптическое скругление с полуосями 100px по горизонтали и 50px по вертикали, формируя правильный овал.

.avatar-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.badge-oval {
  width: 140px;
  height: 70px;
  border-radius: 50%;
}

Асимметричные блоки и органические блоб-формы

Отказ от одинаковых радиусов для всех углов позволяет уйти от строгой сетки и конструировать акцентные контейнеры нестандартной геометрии. Задавая нулевой или минимальный радиус одним углам и крупный - противоположным, создают листовидные карточки, капли, вкладки навигации и диалоговые облака сообщений в чатах.

.leaf-card {
  border-radius: 0 32px 0 32px;
}

.chat-bubble-incoming {
  border-radius: 16px 16px 16px 2px;
}

Для создания плавных несимметричных силуэтов - органических блоб-форм (blob), которые используются как фоновые подложки или маски для иллюстраций - применяется эллиптический синтаксис с разделителем через слеш ( / ). Комбинация восьми различных процентных значений задает независимую кривизну по горизонтали и вертикали для каждого из четырех углов. Чтобы контур оставался гладким и не имел изломов на стыках дуг, сумма процентов для соседних углов по одной оси в идеале должна составлять 100% (например, 60% для левого угла и 40% для правого).

.organic-blob {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
}

В таблице ниже приведена сводка типовых комбинаций радиусов и условий их применения для построения различных интерфейсных фигур.

Взаимодействие border-radius с рамками, фоном, тенями и переполнением

Внедрение полученного свойства border-radius в рабочую таблицу стилей изменяет не только внешнюю геометрию контейнера, но и алгоритм отрисовки смежных декоративных свойств. При сочетании скругления с рамками, фоновыми заливками, тенями и вложенными узлами DOM возникают специфические условия рендеринга, которые необходимо учитывать для предотвращения визуальных артефактов.

Влияние толщины и стиля рамки на внутренний и внешний контур

Заданный в CSS радиус скругления всегда применяется к внешнему краю рамки элемента (border box). Внутренний контур, который ограничивает область отступов (padding box) и контента, вычисляется браузером как разность между внешним радиусом и толщиной рамки ( border-width ) на соответствующей стороне.

Если значение border-width превышает или равняется заданному border-radius , внутренний радиус обнуляется. В результате внешняя граница элемента остается плавно скругленной, тогда как внутренний угол бокса становится строго прямоугольным. При использовании неравномерных рамок (например, border-top-width: 10px и border-left-width: 2px ) круговое скругление на внутреннем контуре автоматически трансформируется в эллиптический переход.

Отрисовка углов также зависит от выбранного стиля линии ( border-style ) и цвета ( border-color ):

• Сплошные ( solid ) и двойные ( double ) линии плавно огибают дугу, сохраняя заданную толщину на всем протяжении изгиба.
• Пунктирные ( dashed ) и точечные ( dotted ) рамки на участках с высокой кривизной могут давать неравномерный шаг штрихов или слияние точек, поэтому для таких стилей предпочтительны умеренные радиусы.
• При назначении разных значений border-color для смежных сторон линия стыка цветов проходит по диагонали угла, угол наклона которой определяется соотношением толщин соприкасающихся границ.

Обрезка дочернего контента и управление фоном

Свойство border-radius подрезает фон и рамку самого элемента, но по умолчанию не маскирует его содержимое. Вложенные блоки с собственным фоном, длинные неразрывные строки текста или дочерние теги img сохраняют прямоугольную геометрию и выступают за пределы скругленных углов родителя.

Для принудительной обрезки вложенного контента по внутреннему контуру скругления родительскому контейнеру назначается свойство overflow: hidden (или его современная альтернатива overflow: clip , которая не создает нового контекста прокрутки). Если за пределы радиуса выходит фоновая заливка самого блока под полупрозрачной или пунктирной рамкой, область отрисовки фона корректируется свойством background-clip .

.card-container {
  border-radius: 20px;
  border: 4px dashed #4a5568;
  background-color: #edf2f7;
  background-clip: padding-box;
  overflow: hidden;
}

Ниже приведена сводная таблица поведения смежных CSS-свойств при комбинировании со скругленными углами:

Сочетание с тенями box-shadow и контуром outline

Генерация теней через box-shadow полностью синхронизирована с геометрией border-radius . Внешняя тень автоматически изгибается по радиусу border-box , а при добавлении параметра растяжения (spread radius) ее кривизна пропорционально увеличивается. Внутренняя тень с ключевым словом inset строится по контуру padding-box , учитывая фактическую толщину рамки. Использование overflow: hidden на том же элементе не обрезает внешнюю тень box-shadow , но изолирует внутренние тени и дочерние блоки.

Внешняя обводка outline , применяемая для индикации фокуса с клавиатуры, в современных движках рендеринга также повторяет заданную форму border-radius . При использовании положительного значения outline-offset дуга обводки эквидистантно расширяется относительно внешнего края элемента, сохраняя оптическую параллельность линий без влияния на блочную модель документа.

Адаптивное скругление и динамическая анимация

В резиновой и адаптивной вёрстке фиксированный радиус может выглядеть непропорционально: слишком крупным на мобильных экранах или незаметным на широких мониторах. Для масштабирования кривизны в зависимости от размера вьюпорта сгенерированные значения комбинируют с кастомными свойствами (CSS-переменными), математическими функциями clamp() , max() и медиазапросами.

:root {
  --card-radius: clamp(12px, 2.5vw, 28px);
}

.adaptive-panel {
  border-radius: var(--card-radius);
}

@media (max-width: 480px) {
  .adaptive-panel {
    border-radius: max(8px, 2vw);
  }
}

Функция clamp(12px, 2.5vw, 28px) удерживает радиус в диапазоне от 12px до 28px , плавно изменяя его пропорционально ширине окна просмотра ( 2.5vw ). Использование max() гарантирует, что при сжатии контейнера скругление не опустится ниже минимального порога читаемости.

Для интерактивного отклика интерфейса при наведении курсора ( :hover ) или нажатии ( :active ), а также для создания непрерывного морфинга органических фигур применяются плавные переходы transition и покадровые сценарии @keyframes .

.morph-button {
  border-radius: 12px;
  transition: border-radius 0.3s ease-in-out;
}

.morph-button:hover {
  border-radius: 24px 6px 24px 6px;
}

. morph-button:active {
  border-radius: 6px;
}

@keyframes blob-wave {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

Для получения плавной интерполяции без скачков в начале и конце цикла transition или @keyframes в исходном и целевом состояниях рекомендуется использовать одинаковые единицы измерения (только px или только % ) и сопоставимую структуру записи (например, восьмизначный эллиптический синтаксис в обоих ключевых кадрах).

Кроссбраузерность кода, вендорные префиксы и утилитарные классы

Свойство border-radius входит в базовую спецификацию CSS и имеет полную нативную поддержку во всех современных десктопных и мобильных браузерах. Отрисовка как стандартных круговых, так и сложных эллиптических закруглений идентично выполняется в Chrome, Firefox, Safari, Opera и Edge. В устаревших браузерах семейства Internet Explorer поддержка стандарта появилась начиная с версии IE 9+, тогда как в IE 8 и более ранних выпусках свойство игнорируется и углы блоков остаются прямоугольными.

Минимальные версии браузеров, обеспечивающие полную аппаратную и программную поддержку стандартного синтаксиса border-radius без дополнительных модификаторов, приведены в таблице ниже.

Историческое назначение вендорных префиксов

На этапе чернового формирования спецификации CSS3 разработчики браузерных движков внедряли экспериментальную поддержку скругления углов через проприетарные вендорные префиксы. В современных таблицах стилей использование префиксов избыточно: стандартное свойство border-radius обрабатывается браузерами напрямую, а дублирование устаревших правил только увеличивает объем CSS-файла.

В легаси-проектах и старых библиотеках стилей встречаются два основных префиксных варианта:

• -webkit-border-radius - применялся для ранних версий браузеров на базе движков WebKit и Blink (Chrome до версии 4.0, Safari до версии 4.0, ранние версии встроенного браузера Android).
• -moz-border-radius - использовался в браузере Firefox (движок Gecko) до версии 3.6 включительно. Примечательно, что в ранней реализации Gecko индивидуальные углы записывались с нестандартным порядком слов, например -moz-border-radius-topleft вместо современного стандарта border-top-left-radius .

/* Избыточная запись для устаревших движков (не требуется в современной верстке) */
.legacy-box {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

/* Актуальный кроссбраузерный стандарт */
.modern-box {
  border-radius: 12px;
}

Соотношение CSS-кода с утилитарными классами Tailwind CSS

При использовании атомарных CSS-фреймворков, таких как Tailwind CSS, сгенерированные значения border-radius можно либо сопоставить со стандартной шкалой дизайн-токенов фреймворка, либо перенести в HTML-разметку напрямую через синтаксис произвольных значений (arbitrary values) с помощью квадратных скобок.

Базовые и специальные правила скругления переводятся в утилитарные классы по следующей схеме:

Если полученное в результате настройки правило содержит нестандартные пиксельные величины, комбинированную запись для разных углов или восьмизначную эллиптическую геометрию со слешем, стандартной сетки классов фреймворка будет недостаточно. В таких случаях в квадратных скобках класса rounded-[...] записывается точное CSS-значение, где все пробелы между параметрами заменяются символом нижнего подчеркивания _ :

<!-- Нестандартный равномерный радиус 18px -->
<div class="rounded-[18px]"></div>

<!-- Асимметричное скругление четырех углов: border-radius: 24px 8px 24px 8px -->
<div class="rounded-[24px_8px_24px_8px]"></div>

<!-- Сложная органическая форма (blob): border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% -->
<div class="rounded-[60%_40%_30%_70%/60%_30%_70%_40%]"></div>

При сборке проекта JIT-компилятор фреймворка преобразует нижние подчеркивания обратно в пробелы и сгенерирует валидный CSS-селектор с точным набором переданных радиусов.