Как CSS border-radius нормализует углы в 2026 году?
Расчёт эллиптических углов CSS border-radius
Свойство CSS border-radius принимает четыре горизонтальных и четыре вертикальных радиуса. Запись 30% 70% 70% 30% / 30% 30% 70% 70% задаёт порядок «верхний левый, верхний правый, нижний правый, нижний левый» для обеих осей. W3C CSS Backgrounds and Borders Module Level 3 определяет проценты относительно соответствующей стороны блока: X относится к ширине, Y — к высоте.
Квадрат 240 × 240 px с парой 30% и 70% по верхней кромке сохраняет полную длину стороны. Для прямоугольника 480 × 240 px те же проценты создают горизонтальные дуги 144 и 336 px, а вертикальные — 72 и 168 px. Макет получает овальную форму без ручного пересчёта каждой точки.
Почему SVG-путь border-radius требует нормализации?
SVG-путь border-radius требует нормализации, когда две дуги одной кромки длиннее стороны. W3C предписывает найти наименьший коэффициент среди верхней, нижней, левой и правой пар, затем умножить все восемь радиусов на найденное значение. Например, 80% + 80% по верхней стороне дают коэффициент 100 ÷ 160 = 0,625: фактические дуги становятся по 50%. Такой путь совпадает с CSS-предпросмотром, сохраняет касательные сегменты и не допускает самопересечения контура. Проверка на широком и высоком блоке показывает, какая ось стала ограничивающей.