дуга внешнего радиуса, внутреннего. Когда расчёт верен, между дугами всюду один и тот же зазор — включите «крупно», чтобы рассмотреть угол.
.card {
--radius: 40px;
--padding: 20px;
--border: 3px;
border: var(--border) solid;
border-radius: var(--radius);
padding: var(--padding);
}
.card__inner {
border-radius: max(0px, var(--radius) - var(--padding) - var(--border));
}Правило: радиус внутреннего = радиус внешнего минус отступ
Когда одна скруглённая коробка лежит внутри другой, радиусы не должны совпадать. Внутренний элемент отодвинут от внешнего на величину отступа, и его угол начинается ближе к центру — значит, и загибаться он должен круче. Отсюда вся арифметика: Rᵢ = Rₑ − E, где E — расстояние между контурами, то есть padding плюс толщина рамки. То же самое с другой стороны: если задан внутренний радиус, внешний равен Rᵢ + E.
Как выглядит ошибка
Самый частый вариант — оставить обоим элементам один и тот же радиус. Тогда в углу зазор между контурами становится зрительно шире, чем по сторонам: дуги расходятся. Обратная крайность — оставить внутреннему нулевой радиус, и угол торчит острым в круглой рамке. Переключатель «Одинаковый» в инструменте показывает первый случай: включите его, сравните с расчётом и увидите разницу, ради которой формула и нужна.
Почему в CSS лучше переменные, а не два числа
Можно выписать оба радиуса вручную, но связь между ними при этом теряется: стоит поменять отступ, и углы разъедутся, а причину никто не вспомнит. Поэтому инструмент отдаёт код через кастомные свойства, где внутренний радиус вычисляется из внешнего прямо в стилях. Обёртка в max(0px, ...) нужна на случай, когда отступ больше радиуса: отрицательное значение браузер отбросил бы вместе со всем свойством, а так угол просто становится прямым.
Точность приёма
Строго математически дуги при таком расчёте не эквидистантны: центры окружностей не совпадают, и расстояние между линиями по ходу дуги чуть меняется. На практике расхождение меньше того, что различает глаз, поэтому приём давно принят в интерфейсной вёрстке и заложен в дизайн-системы. Включите «крупно» и посмотрите на угол вблизи — видно, насколько близко дуги идут друг к другу.