Привет, это Настя. Есть в вебе штуки, которые все терпели годами и уже перестали замечать, — как скрип двери, к которому привыкаешь. Один из таких скрипов — углы. Ровно круглый угол мы умели делать давно, а вот всё остальное приходилось выпиливать вручную: картинками, масками, обрезкой. И вот наконец в CSS появилось свойство, которое закрывает этот вопрос целиком. Знакомьтесь: corner-shape.
Что не так было с border-radius
border-radius — наш старый добрый друг. Он скругляет углы, и делает это ровно одним способом: рисует дугу окружности. Хочешь мягче — задаёшь радиус побольше, хочешь острее — поменьше. Но форма угла всегда одна и та же: кусок круга. А что, если дизайнер принёс макет, где у карточки угол срезан по прямой? Или сделан вырезом внутрь, как билетик? Или это тот самый «яблочный» плавный квадрат, который вы видите в иконках iOS?
До недавнего времени ответ был грустный. Скошенный угол — рисуем через clip-path. Вырез — снова clip-path или SVG-маска. Squircle — вообще отдельная боль: либо картинка, либо хитрая генерация пути скриптом. И у всех этих обходов есть общая беда: они врут по краям. clip-path обрезает форму, но тень выходит прямоугольной, рамка не повторяет вырез, а фон живёт своей жизнью. Приходилось городить костыли поверх костылей.
border-radius умел ровно одну форму угла — дугу окружности. Всё остальное дизайнеры и верстальщики добывали хаками, которые ломались на тенях и рамках.
corner-shape: одно свойство меняет форму угла
Главная идея простая и красивая: border-radius по-прежнему отвечает за размер угла, а новое свойство corner-shape — за его форму. То есть они работают в паре. Вы говорите «скругли на 24 пикселя» — и тут же уточняете, какой именно кривой это скругление рисовать. Пишется в одну строку поверх привычного кода:
border-radius: 24px; corner-shape: bevel; — и угол больше не круглый, а срезанный по прямой. Заменили bevel на scoop — получили вогнутый вырез. Поставили squircle — вышел тот самый плавный «яблочный» квадрат. И, что важно, форму слушаются все слои сразу: рамка, тень, фон. Потому что это не обрезка поверх, это и есть настоящая форма элемента.
Пять слов, которые стоит запомнить
У corner-shape есть набор готовых значений-ключевых слов. round — обычное скругление, как раньше. bevel — угол срезан по прямой линии. scoop — вогнутый вырез внутрь. notch — резкий уголок-ступенька. squircle — мягкий переход между кругом и квадратом. И ещё square, который наоборот убирает скругление и делает угол острым. А задавать можно каждому из четырёх углов своё значение — например, corner-shape: round bevel bevel round для «ленточки» со срезанным правым краем.
superellipse() и магия числа 2
Если хочется не просто выбрать из готового списка, а тонко покрутить форму, есть функция superellipse() с числом внутри. Она описывает суперэллипс — семейство кривых между кругом и квадратом. Единица (superellipse(1)) — обычная дуга, то есть тот же round. Ноль — прямая линия, то есть bevel. Отрицательные числа гнут кривую внутрь и дают вогнутость. А чем больше число, тем ближе форма к строгому квадрату.
И вот тут — самое любимое. squircle — это ровно superellipse(2). То самое число 2 и есть секрет «яблочной» иконки: именно такой суперэллипс Apple использует в своих скруглениях годами, и повторить его в вебе раньше было целым квестом. Теперь это одно слово в CSS. Приятный бонус: между формами можно делать анимацию — например, кнопка при наведении плавно перетекает из скоса в squircle, потому что переходы считаются через те же числа суперэллипса.
Где это реально пригодится
Не спешите обрезать всё подряд — форма угла это акцент, а не украшательство ради украшательства. Но несколько сценариев напрашиваются сами. Кнопки: squircle делает их дороже и мягче, а bevel — техничнее, «инженернее». Карточки товаров и отзывов: лёгкий scoop добавляет рукотворности, будто предмет вырезан вручную. Бейджи и ленточки: срезанный уголок сразу читается как ярлык или стикер. Теги и статусы: notch придаёт им вид штампа или чипа на плате.
Отдельная радость — аватарки. Раньше «яблочный» квадрат под фото делали через SVG-маску, а теперь достаточно border-radius плюс corner-shape: squircle, и рамка с тенью аккуратно повторят форму. Это тот случай, когда одна строчка убирает целый блок костылей из проекта.
Поддержка браузеров: осторожно, но уже можно
Честно про грустное: на лето 2026 corner-shape понимают только браузеры на движке Chromium — это Chrome (с версии 139), Edge и им подобные. Safari и Firefox пока не умеют, публичных сроков нет, и до статуса «стабильно везде» свойство ещё не дошло — по разным замерам его видят примерно две трети пользователей. Так что в бой без страховки выпускать рано.
Хорошая новость в том, что страховка встроена сама собой. Если браузер не знает про corner-shape, он его просто игнорирует — и остаётся обычное скругление от border-radius. Никто ничего не ломает: в Chrome человек увидит squircle, в Safari — мягкий круглый угол. Это и называется прогрессивным улучшением. А чтобы быть совсем аккуратным, форму можно включать внутри проверки @supports (corner-shape: bevel) и не трогать базовый вид.
corner-shape можно осторожно брать в прод уже сегодня: где браузер умеет — покажет новую форму, где нет — тихо оставит привычное скругление. Ничего не сломается.
Ниже — короткое видео про CSS-свойства как жанр: полезно почувствовать, как одно объявление меняет поведение и вид элемента. Смотрите как разминку перед тем, как открыть свой проект и попробовать corner-shape вживую.
А вы бы куда добавили squircle?
Мне corner-shape нравится как раз своей скромностью: это не революция ради хайпа, а закрытая наконец старая дыра. Углы перестали быть только круглыми — и это тихо, но заметно поднимает планку того, как может выглядеть интерфейс. Если бы вы завтра добавили в свой проект одну новую форму угла — что бы это было: мягкий squircle на аватарках, техничный bevel на кнопках или неожиданный scoop на карточках? Расскажите, куда просится форма именно у вас.
Пока нет комментариев