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

С введением свойства corner-shape ситуация меняется кардинально. Это полноценное расширение работы с углами рамок и элементов, позволяющее задавать разнообразные формы — от скошенных (bevel) и вогнутых (scoop) до суперэллиптических (squircle), которые напоминают стиль Apple. Свойство действует в связке с border-radius и дополняет его, а не заменяет.

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

На данный момент поддержка в браузерах ограничена Chrome 139+ и его аналогами, что делает corner-shape кандидатом для прогрессивного улучшения интерфейсов. Базовые стили с border-radius работают повсеместно, а улучшенная версия с corner-shape активируется там, где это поддерживается, без сбоев и предупреждений.

В качестве примера использования можно привести оформление карточек товаров с ленточными бейджами. Раньше для таких элементов приходилось применять сложные clip-path или псевдоэлементы, что было хрупким и неудобным. Теперь же с помощью corner-shape можно добиться аккуратного и устойчивого эффекта скосов и плавных переходов, который улучшает визуальное восприятие без дополнительных ухищрений.

Подробнее об особенностях, синтаксисе и практических примерах можно узнать в статье Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI на Smashing Magazine.

Рекомендовано использовать corner-shape как инс