corner-shape и border-shape: что это и в чём разница?

24.04.2026 • css

Вступление

В Хроме 147 включили поддержку CSS-свойства border-shape. Ещё раньше, в Хроме 139, появилось свойство corner-shape. В чём разница? Что делают эти свойства, почему их два и в чём отличие? Давайте начнём с corner-shape, так как он вышел раньше.

corner-shape

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

corner-shape как раз предлагает решение этой проблемы, а также добавляет дополнительные варианты по отображению углов элемента:

Для начала нам потребуется обычное свойство border-radius, которое задаёт радиус скругления углов. Затем добавим border-shape, у которого есть несколько вариантов значений:

corner-shape: round | scoop | bevel |
    notch | square | squircle | superellipse(X)

Начальное значение – round. И для каждого из 4 углов элемента можно задать отдельное значение. Функция superellipse(X) принимает значения от -Infinity до Infinity. По сути, все остальные значения являются “шоткатами”:

square = superellipse(Infinity)
squircle = superellipse(2)
round = superellipse(1)
bevel = superellipse(0)
scoop = superellipse(-1)
notch = superellipse(-Infinity)

Тем самым, теперь мы можем гибко задавать “степень скругления” углов наших элементов.

border-shape

border-shape позволяет задать форму border (как ни странно). Есть два варианта: предоставить одно или два значения:

• Одно значение. border рисуется контуром по указанной форме
• Два значения. border рисуется между первой формой и второй

Само же значение (форма) может быть задана несколькими способами:

• Через функцию по типу inset(), rect(), polygon(), и некоторыми другими
• Через функцию path(), в которую можно передать путь SVG
• Через функцию shape(), которую мы обсуждали немного ранее

Думаю, это может звучать очень похоже на clip-path, который тоже позволяет задать форму для элемента, так в чём разница? clip-path обрезает элемент и не позволяет рисовать границу, а border-shape (в связке с border) – позволяет. Таким образом, если нужна только обрезка, то вместо border-shape можно использовать clip-path.

Упомянули border, а как он связан с border-shape? Дело в том, что толщина и цвет границы, заданной с помощью border-shape, берутся из свойств border-width / border-color. Что до border-style, то оно не используется. Также не используется и разделение по 4м сторонам, характерное для border, и используются только 1 значение.

Таким образом, все геометрические размеры и определения для content-box / border-box задаются ровно также, как и раньше. Если задали отступ в 10px – то content-box будет на 20px меньше border-box.

(красным выкрашен обычный прямоугольный border, голубым – реально отображаемая граница через border-shape)

Отличия corner-shape от border-shape

corner-shape нужен, чтобы изменить форму углов, размер которых задан через border-radius.

border-shape нужен, чтобы задать форму границы по всему периметру. Ряд параметров берётся из border-width и border-color.

Итого

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

Если же border-shape не поддержано, то можно или попробовать сфолбечить через существующие свойства (clip-path в некоторых случаях подойдёт), а в некоторых случаях может хватить и старого доброго border.

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

Как относиться к новым возможностям и станут ли они повсеместными? Вероятно, не повсеместными, но точечно приносить пользу будут, и использовать их можно уже сейчас (с оговоркой про прогрессивное улучшение). А что вы думаете про варианты использования? Поделитесь ими в комментариях.

Почитать ещё посты