CSS corner-shape: как создавать скошенные и сквиркл-углы без хаков

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

Что такое corner-shape и как оно работает

Свойство corner-shape — это новое дополнение к CSS, которое определяет форму углов элемента. В отличие от border-radius, создающего только круглые скругления, corner-shape предлагает четыре ключевых значения: round (по умолчанию, как у border-radius), bevel (скос), scoop (выемка) и squircle (сквиркл — плавный переход между кругом и квадратом). Свойство работает в паре с border-radius, задающим радиус, а corner-shape определяет форму. Например, corner-shape: bevel; border-radius: 20px; создаёт скошенные углы с фаской 20px. Поддержка уже появилась в Chrome 121+ и Safari 17.5+.

Как corner-shape отличается от clip-path?

Долгое время веб-дизайнеры были ограничены только круглыми скруглениями. Для создания скошенных углов приходилось использовать clip-path с полигонами, SVG-маски или накладывать псевдоэлементы — все эти методы были хрупкими, сложными в поддержке и плохо сочетались с адаптивностью. С появлением corner-shape эти ухищрения уходят в прошлое. Это часть более широкой тенденции упрощения CSS: современные свойства, такие как aspect-ratio, container queries и scroll-snap, уже избавили разработчиков от множества JavaScript-костылей.

Clip-path вырезает область произвольной формы, но при этом содержимое элемента может обрезаться, а доступность страдает — обрезанные элементы не всегда корректно воспринимаются скринридерами. Corner-shape же работает на уровне отрисовки углов, не затрагивая содержимое и сохраняя семантику. Кроме того, clip-path часто вызывает проблемы с производительностью при анимации, тогда как corner-shape — это нативное свойство, которое браузер может оптимизировать.

Технические подробности: синтаксис, анимация и кастомные кривые

Свойство corner-shape принимает одно из четырёх ключевых слов. Значение round — аналог border-radius, bevel создаёт прямую фаску, scoop — вогнутый вырез, а squircle — сквиркл, который выглядит как скруглённый квадрат с более плавным переходом, чем у обычного border-radius. Радиус задаётся через border-radius, причём можно использовать разные радиусы для каждого угла. Свойство анимируется: при переходе между формами браузер плавно интерполирует углы. Также возможно комбинировать corner-shape с другими CSS-свойствами, например, с box-shadow или outline, что даёт интересные визуальные эффекты.

Как использовать corner-shape в продакшене уже сегодня?

Хотя поддержка corner-shape пока ограничена Chrome и Safari, вы можете безопасно применять его с помощью @supports. Например, напишите основной стиль с border-radius, а затем добавьте corner-shape: bevel внутри @supports (corner-shape: bevel). Для браузеров без поддержки углы останутся круглыми, что является приемлемым запасным вариантом. Это особенно полезно для проектов, где важна прогрессивная деградация, а не строгая пиксельная точность.

Кого затронет и как

Для разработчиков UI-компонентов corner-shape означает более чистый код и меньше багов. Дизайнеры получат свободу в создании современных интерфейсов — скошенные углы уже активно используются в Material Design и других системах. Бизнес выиграет за счёт ускорения разработки: вместо часов на подгонку clip-path достаточно одной строки CSS. Пользователи увидят более плавные и эстетичные интерфейсы, особенно на мобильных устройствах, где сквиркл-углы напоминают форму иконок приложений. В российском сегменте это особенно актуально для финтех- и банковских приложений, которые стремятся к современному дизайну.

Что будет дальше

Ожидается, что corner-shape будет включён в черновик спецификации CSS Backgrounds and Borders Level 4. В ближайшие месяцы поддержку могут добавить Firefox и Edge. Разработчикам стоит начать экспериментировать с @supports (corner-shape: bevel), чтобы обеспечить graceful degradation для старых браузеров. Вероятно, в будущем появятся дополнительные значения, например, для асимметричных углов или углов с разной формой на каждой стороне.

Итог

Corner-shape — это долгожданное расширение возможностей CSS, которое избавляет от хрупких хаков и открывает новые дизайнерские возможности. Уже сейчас его можно использовать в продакшене с запасным вариантом через @supports. Следите за обновлениями браузеров, чтобы первыми внедрить эту технологию в свои проекты.