Новые возможности CSS иногда приходят не как революция, а как долгожданное снятие старых ограничений. Именно так выглядит corner-shape — свойство, которое расширяет привычный border-radius и позволяет описывать форму углов куда богаче, чем обычное скругление.
Годами разработчики пытались выйти за пределы круглых углов при помощи clip-path, SVG-масок и других хрупких обходных решений. Всё это работало с оговорками: тени обрезались, рамки вели себя неестественно, а малейшее изменение отступов могло всё сломать. corner-shape предлагает более нативный путь.
Когда-то даже обычные скруглённые углы были роскошью: для них приходилось собирать блок из нескольких фоновых изображений и надеяться, что заказчик не попросит поменять радиус. Потом появился border-radius, и веб наконец выдохнул. Но, по сути, все эти годы он давал нам только одну форму — круговую дугу.
Хочется скошенный угол? Приходится брать clip-path. Нужны вогнутые вырезы, как у билетных купонов? Идти в SVG. Нужны squircle-иконки в стиле Apple? Подбирать кривую вручную. Новый corner-shape как раз и убирает эту необходимость.
Что такое corner-shape
corner-shape — это не замена border-radius, а его дополнение. Само по себе свойство ничего не делает. Но если вместе с ним задан border-radius, оно меняет характер самой кривой, по которой строится угол.
Поддерживаются такие значения:
round— стандартное скругление, как у обычногоborder-radius;squircle— суперэллипс, тот самый “яблочный” мягкий квадрат;bevel— скошенный угол по прямой;scoop— вогнутая кривая;notch— острый внутренний вырез;square— фактически отменяет скругление.
Как и у border-radius, значения можно задавать отдельно для каждого угла:
corner-shape: bevel round scoop squircle;
/* top-left, top-right, bottom-right, bottom-left */Для более тонкой настройки можно использовать функцию superellipse():
.element {
border-radius: 25px;
corner-shape: superellipse(0); /* эквивалентно 'bevel' */
}Важно и то, что это влияет не только на саму рамку: форму начинают правильно наследовать фон, outline и тени. Именно этого часто не хватало решениям на основе clip-path.
Почему здесь важен progressive enhancement
На момент публикации статьи, в марте 2026 года, corner-shape поддерживается только в Chrome 139+ и других Chromium-браузерах. Firefox и Safari его пока не понимают.
Из-за этого свойство особенно хорошо ложится на подход progressive enhancement. Базовый интерфейс строится привычными средствами — через border-radius, маски, градиенты, clip-path, если нужно. А поверх него, только в поддерживаемых браузерах, можно добавить улучшенную версию.
Во всех примерах из статьи автор использует такую структуру:
@layer base, presentation, demo;Слой presentation содержит уже законченный, аккуратный интерфейс, который хорошо выглядит везде. Слой demo включает улучшения через @supports:
@layer demo {
@supports (corner-shape: bevel) {
/* улучшенные стили */
}
}То есть не нужно ни баннеров про отсутствие поддержки, ни “сломанных” демо. Есть просто два уровня качества: хороший и ещё лучше.
Демонстрация 1: карточки товаров с ленточными бейджами
Практически в любом интернет-магазине встречаются бейджи вроде “New” или “Sale”, закреплённые в углу карточки. Обычно для таких ленточек приходится изобретать что-то на clip-path: polygon() или на псевдоэлементах.
Но в качестве базовой версии вполне достаточно простого бейджа со слегка скруглёнными углами:
.product__badge {
border-radius: 0 4px 4px 0;
background-color: var(--badge-bg);
}Это уже читаемо, аккуратно и работает везде.
А если браузер поддерживает corner-shape, можно доработать и сами карточки, и бейджи:
@layer demo {
@supports (corner-shape: bevel) {
.product {
border-radius: 40px;
corner-shape: squircle;
}
.product__badge {
padding: 0.35rem 1.4rem 0.35rem 1rem;
border-radius: 0 16px 16px 0;
corner-shape: round bevel bevel round;
}
}
}Комбинация round bevel bevel round превращает бейдж в направленную “стрелку”: у края карточки угол мягкий, а с другой стороны — заострённый. Всё это без clip-path, без псевдоэлементов и без проблем с тенями.
Карточки тоже можно сделать выразительнее, переведя их на squircle — тот самый тип формы, который визуально делает интерфейс чуть более “премиальным”.
Демонстрация 2: кнопки, теги и прочие компоненты
Здесь идея в том, чтобы показать: corner-shape — это не только про эффектные hero-блоки. Он вполне применим к обычным компонентам дизайн-системы — кнопкам, тегам, плашкам, стрелкам, бейджам.
База остаётся очень спокойной: обычные кнопки с border-radius: 10px, аккуратная типографика, чистый интерфейс. Уже этого достаточно для продакшена.
Но слой улучшения позволяет задавать каждому типу кнопки свой характер:
@layer demo {
@supports (corner-shape: bevel) {
.btn--primary {
corner-shape: bevel;
transition: corner-shape 0.3s ease;
&:hover {
corner-shape: squircle;
}
}
.btn--secondary {
border-radius: 25px;
corner-shape: superellipse(0.5);
}
.btn--danger {
border-radius: 16px;
corner-shape: squircle;
}
.btn--notch {
border-radius: 12px;
corner-shape: notch;
}
.btn--scoop {
border-radius: 14px;
corner-shape: scoop;
}
}
}Так основная кнопка становится чуть гранёной и “драгоценной”, а при наведении смягчается в squircle. Вторая получает промежуточную форму через superellipse(0.5), а остальные — собственную визуальную интонацию: где-то более мягкую, где-то более резкую.
Для тегов и стрелок это тоже удобно: например, round bevel bevel round позволяет сделать направленную метку без clip-path, но при этом с нормальными рамками и тенями.
Демонстрация 3: карточки с отзывами
Один из самых выразительных примеров в статье — блок с отзывами. Здесь corner-shape работает уже не как чисто геометрический инструмент, а как часть общего художественного языка.
Базовая версия — это карточки с засечковой типографикой, тёплой палитрой и мягкими скруглениями. Уже выглядит как интерфейс дорогого маркетингового сайта.
А затем добавляется слой улучшения:
@layer demo {
@supports (corner-shape: scoop) {
.testimonial {
border-radius: 20px;
corner-shape: squircle;
}
.testimonial--featured {
border-radius: 24px;
corner-shape: scoop;
}
.testimonial:not(.testimonial--featured):nth-child(even) {
corner-shape: scoop round;
}
.testimonial__avatar {
border-radius: 28%;
corner-shape: squircle;
}
}
}Главная карточка получает полностью вогнутые углы (scoop), за счёт чего композиция становится более “редакционной”, почти печатной по ощущению. У обычных карточек уголки можно миксовать, а аватары переводить из круга в squircle.
Автор отдельно отмечает хороший приём: corner-shape: scoop особенно органично сочетается с засечковыми шрифтами и тёплыми палитрами, потому что создаёт более “живое”, редакционное ощущение. А для геометричных интерфейсов на гротесках чаще лучше подходят squircle и bevel.
Демонстрация 4: карточки тарифов
На странице тарифов почти всегда стоит одна и та же задача: выделить один план, не превращая остальные в визуальный шум. corner-shape даёт для этого ещё один уровень иерархии.
База здесь — три карточки в ряд, одна из них выделена градиентом, рамкой и бейджем “Most Popular”. Улучшенная версия делает различия ещё тоньше:
@layer demo {
@supports (corner-shape: squircle) {
.plan {
border-radius: 20px;
corner-shape: squircle;
}
.plan--featured {
border-radius: 24px;
corner-shape: scoop;
}
.plan__badge {
inset-inline-start: 50%;
translate: -50% 0;
padding-inline: 1.2rem;
border-radius: 10px;
corner-shape: bevel;
}
.plan__cta {
border-radius: 12px;
corner-shape: squircle;
}
}
}Обычные карточки получают squircle, выделенная — scoop, а бейдж становится гранёным за счёт bevel. В итоге форма начинает поддерживать смысловую иерархию: самый важный элемент получает самую выразительную геометрию.
Демонстрация 5: музыкальный плеер
Финальный пример — тёплый тёмный интерфейс музыкального плеера. Здесь хорошо видно, что corner-shape может работать сразу на множестве элементов внутри одной цельной визуальной системы.
Изначально всё уже выглядит законченным: обложка альбома, теги жанров, элементы очереди, кнопки управления — у всего обычные скругления.
А потом подключается слой улучшения:
@layer demo {
@supports (corner-shape: squircle) {
.now-playing {
border-radius: 20px;
corner-shape: squircle;
}
.now-playing__art {
border-radius: 16px;
corner-shape: squircle;
}
.now-playing__swatch {
border-radius: 26%;
corner-shape: squircle;
}
.queue-item {
border-radius: 14px;
corner-shape: scoop round;
}
.tag {
border-radius: 8px;
corner-shape: bevel;
}
}
}Карточка плеера и обложка получают squircle, элементы очереди — комбинированную форму scoop round, а теги становятся чуть более жёсткими за счёт bevel.
Поддержка браузерами
На момент публикации статьи corner-shape доступен в Chrome 139+ и других Chromium-браузерах. В Firefox и Safari поддержки ещё нет. Само свойство описано в спецификации CSS Borders and Box Decorations Module Level 4.
Практически это не проблема, если сразу закладывать правильную архитектуру. Интерфейс не должен зависеть от corner-shape как от обязательного условия. Базовая версия должна быть полноценной сама по себе, а corner-shape — просто делать её ещё богаче.
Итог
Главная мысль статьи очень здравая: не стоит проектировать интерфейс только ради corner-shape, но и не нужно игнорировать его только потому, что поддержка пока неполная.
Лучший путь — сделать хороший базовый UI на border-radius, а затем добавить второй уровень выразительности:
squircle— для более “премиальных” карточек, аватаров и обложек;bevel— для направленных элементов и гранёных плашек;scoop— для редакционного, более органичного настроения;notch— для резких, механистичных акцентов;superellipse()— для тонкой настройки между кругом и squircle.
И особенно интересно то, что формы теперь можно миксовать по углам: например, round bevel bevel round или scoop round. Раньше для такого почти наверняка понадобились бы SVG или хитрые маски. Теперь это достигается декларативно.
Новый этап после border-radius вряд ли мгновенно изменит весь веб, но он уже убирает целый класс костылей. А это всегда хороший знак.
Что ещё почитать
corner-shapeна MDN- What Can We Actually Do With
corner-shape? — Daniel Schwarz - CSS Borders and Box Decorations Module Level 4
- Demo “eco-labels” на CodePen
Теги: css, ui, web-design