Эта статья — перевод оригинальной статьи «Understanding CSS corner-shape and the Power of the Superellipse»

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Свойство CSS corner-shape — это одно из самых захватывающих нововведений в геометрический инструментарий веб-дизайна за последние годы. Оно расширяет наши возможности по управлению внешним видом углов, выходя за рамки привычных скруглений с помощью border-radius. Это на первый взгляд небольшое дополнение открывает целый мир новых возможностей, которые раньше требовали сложных реализаций на основе SVG или решений с использованием изображений.

На момент написания этой статьи (июнь 2025 года) свойство corner-shape является совсем новой возможностью с ограниченной поддержкой браузеров: оно доступно только в Chrome (начиная с версии M139 и выше). Спецификация может ещё измениться. Чтобы увидеть эти демо, попробуйте Chrome Canary.

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

Основа

Свойство border-radius дало нам возможность легко создавать скруглённые углы у элементов. При максимальном значении использование абсолютных единиц (например, пикселей) формирует «капсулу», тогда как процентные значения создают равномерно скруглённые углы. Однако любое ненулевое значение радиуса всегда приводило к созданию эллиптической кривой.

Хотя это мощный и полезный инструмент, иногда нам нужно нечто… другое. И вот здесь на сцену выходит новое свойство corner-shape, расширяющее наш геометрический словарь за пределы одних лишь скруглённых углов.

Знакомство с corner-shape

Свойство corner-shape работает в паре с border-radius: если border-radius определяет «размер» кривой, то corner-shape задаёт её форму.

CSS предоставляет несколько предопределённых ключевых слов для формы углов:

• round (по умолчанию): создаёт привычные круглые или эллиптические углы

• squircle: плавный переход между квадратом и кругом

• scoop: вогнутые четверти эллипса

• bevel: прямые линии, соединяющие угловые точки

• notch: формирует врезанный внутрь угол

• square: сохраняет прямые углы независимо от значения border-radius (зачем это вообще нужно?!)

Эти ключевые слова позволяют создавать разнообразные и визуально интересные границы без сложных реализаций, а также легко формировать простые геометрические фигуры, такие как ромбы, восьмиугольники или знаки «плюс» (+).

.rhombus {
  aspect-ratio: 2 / 3;
  border-radius: 50%;
  corner-shape: bevel;
}

.octagon {
  aspect-ratio: 1;
  border-radius: calc(100% / (2 + sqrt(2))); /* ~29% */
  corner-shape: bevel;
}

.plus {
  aspect-ratio: 1;
  border-radius: calc(100% / 3);
  corner-shape: notch;
}

.plus-alt {
  /* rotate to get a X sign */
  rotate: 45deg;
}

В недалёком будущем мы также сможем использовать сокращённую запись corners для более удобного написания. Например:

.rhombus { 
  corners: 50% bevel;
}

Мы можем создавать ещё больше форм с помощью squircle и scoop, но подробно разберём их, когда будем говорить о суперэллипсах. А пока давайте обсудим использование нескольких значений…

Работа с несколькими значениями

До этого момента мы использовали одно значение для border-radius, но можно проявить гораздо больше креатива. Как вы, возможно, знаете, border-radius может принимать до восьми разных значений (горизонтальные и вертикальные радиусы для каждого из четырёх углов).

Особенно интересно это становится в сочетании с corner-shape. Взаимодействие разных значений радиуса и форм углов создаёт богатую площадку для дизайнерских экспериментов.

Используя несколько значений, мы можем создавать дополнительные дизайны и формы, например, мою любимую форму — шестиугольники. Теперь мы можем генерировать идеальные шестиугольники всего за несколько простых строк CSS, применяя для углов форму bevel и задавая разные значения для горизонтальных и вертикальных радиусов (50% и 25%).

.hexagon {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
}

.hexagon-alt {
  aspect-ratio: 1 / cos(30deg);
  border-radius: 25% / 50%;
}

Но border-radius — это не единственное свойство, которое может принимать несколько значений. corner-shape также поддерживает сокращённую запись и может принимать до четырёх значений — по одному для каждого угла. Таким образом, мы можем создавать ещё более уникальные формы.

.shapeA {
  aspect-ratio: 1 / 2;
  border-radius: 40% / 50%;
  corner-shape: bevel squircle squircle bevel;
}
.shapeB {
  aspect-ratio: 1;
  border-radius: 10% 50% 50%;
  corner-shape: round scoop bevel;
  rotate: 45deg;
}
.shapeC {
  aspect-ratio: 1;
  border-radius: 10% 10% 50% 50%;
  corner-shape: round round scoop scoop ;
}

Одна из этих форм навела меня на мысль о речевых облачках. Раньше нам всегда приходилось прибегать к помощи псевдоэлементов (и немного «хаков») для создания «стрелки» внизу элемента. Теперь это можно сделать с помощью простого border-radius.

Мы также можем задавать стиль только для одного конкретного угла, что особенно полезно, когда нужно оформить один угол иначе, например, чтобы выделить место для счётчика или кнопки в углу элемента.

.container {
  border-radius: 40px;
  corner-top-right-shape: scoop;
}

Анимация и переход свойства corner-shape

Если вы нажали красную кнопку в предыдущем примере (молодец!), вы, возможно, заметили, что закрытие и открытие элемента происходит через переход свойства corner-shape. Я использую тот факт, что notch с радиусом 50% фактически полностью обрезает элемент.

Так же, как и с border-radius, свойство corner-shape можно анимировать или плавно переходить от одной формы к другой.

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

Сила суперэллипса

До этого момента мы рассматривали предопределённые ключевые слова свойства corner-shape, которые хороши, но существует ещё более мощная возможность, о которой мы пока не говорили: суперэллипс! Он, пожалуй, впечатляет больше, чем все предыдущие варианты вместе взятые, ведь эти ключевые слова по сути представляют собой лишь определённые точки на спектре суперэллипса. Давайте разберёмся, что такое суперэллипсы, как работает функция superellipse и как мы можем использовать её для точной настройки границ.

Как математическая концепция, суперэллипс существует уже примерно сто лет, и мне он нравится тем, что кто-то взял то, что существовало веками (формулу эллипса), и сказал: «Давайте сделаем это иначе». Габриель Ламе взял формулу эллипса [x^2 + y^2 = 1] и задался вопросом: что будет, если заменить ^2 на что-то другое?! В результате — прошло сто лет, его формула встроена в браузеры и делает тысячи веб-разработчиков счастливее.

Математики, вероятно, поправят, что точная формула эллипса выглядит как [x^2/a^2 + y^2/b^2 = 1], но поскольку aa и bb — это оси, задаваемые шириной и высотой элемента, мы можем принять a=b=1a = b = 1 и получить упрощённую формулу [x^2 + y^2 = 1].

Когда мы заменяем ^2 на переменную nn, эта переменная теперь будет определять «квадратность» формы. Если ^2 соответствует обычному кругу, то при значениях больше 2 кривая приближается к прямоугольнику, а при значениях меньше 2 линия начинает выпрямляться. Когда n=1n = 1, получается [x^1 + y^1 = 1], что эквивалентно [x + y = 1] — это формула прямой линии, в результате образуется форма ромба. Любое число между нулём и единицей даёт нам вогнутую форму.

Функция CSS superellipse

Но если всё это кажется немного сложным, не переживайте — разработчики CSS позаботились о нас, сделав эту функцию гораздо проще и интуитивнее. В отличие от формулы Ламе, CSS-функция superellipse() принимает один аргумент (назовём его kk), который может быть любым, положительным или отрицательным. Механизм работы функции следующий:

• Ноль — это «середина». Если передать 0 в функцию, то есть superellipse(0), мы получим прямую линию, как в случае с bevel, который мы видели ранее.

• Любое положительное число создаёт выпуклую кривую: superellipse(1) — обычный круг, superellipse(2) — наш squircle, а с ростом числа форма становится всё более квадратной, при +∞+\infty мы получаем идеальный квадрат.

• То же самое происходит с отрицательными числами. superellipse(-1) создаёт форму, напоминающую звезду — это тот самый scoop, который мы видели ранее, а чем меньше число, тем глубже вогнутый угол.

Просто, правда? Но как это работает?

CSS-функция superellipse(k) использует показатель степени 2^k, чтобы сопоставить значение с nn. То есть [n = 2^k], и полная формула выглядит так:

x^{(2^k)} + y^{(2^k)}

Такой формат расчёта более логичен и делает свойство интуитивно понятным.

• Когда k = 0, получается n = 2^0 = 1, отсюда и прямая линия.

• Если k = 1, то n = 2, что даёт обычную круглую кривую.

• Если k > 1, получаем n > 2, в результате форма становится более «squircle».

• С другой стороны, при отрицательных значениях k < 0 nn всегда будет числом между нулём и единицей, что создаёт вогнутую кривую внутрь элемента.

Разные показатели степени

Одно из ограничений текущей функции superellipse() заключается в том, что мы не можем передавать ей два аргумента, например superellipse(k, l), чтобы использовать разные показатели для осей x и y. Это дало бы формулу [x^{2^k} + y^{2^l} = 1].

Если бы это было возможно, мы могли бы создавать по-настоящему интересные формы, например такие:

Выход за пределы двух измерений

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

x1^n​ + x2^n ​+ ⋯ + xd^n ​= 1

Итоги

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

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

Особая благодарность Ноаму Розенталю за проверку кода и примеров, помощь в уточнении идей и, конечно же, за создание спецификации для corner-shape и её реализацию в Chromium.