Вы наверняка слышали о новой функции shape() (теперь — Baseline) и свойстве corner-shape. Но есть и третий участник, который тихо решает самую большую проблему CSS-фигур: border-shape.

Сначала краткое напоминание: shape() и corner-shape

Функция shape() позволяет использовать синтаксис, похожий на SVG, внутри clip-path и offset-path. Это чище, чем path(). Я написал о ней серию из четырёх частей, а также отдельный глубокий разбор сложных фигур. И да — есть конвертер, который превращает любую SVG-фигуру в валидный CSS-код shape().

corner-shape работает вместе с border-radius. Вместо простого скругления углов он позволяет выбирать между round, scoop, bevel, notch или squircle. Здорово, правда?

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}

Но вот ключевое различие: corner-shape корректно работает с border, box-shadow и другими декоративными элементами. clip-path и mask их обрезают. Вот почему corner-shape важен, даже если сегодня поддерживается только в Chromium.

Встречайте border-shape: создатель фигур, сохраняющий границы

corner-shape затрагивает только углы. А что, если нужно придать форму всему элементу? Именно это и делает border-shape. Он принимает те же значения, что и clip-path, включая shape().

Так это просто переименованный clip-path? Нет. clip-path обрезает всё — границы, тени, обводки — всё исчезает. border-shape придаёт форму элементу, не обрезая декоративные элементы. Ваши границы следуют форме. Ваши тени следуют форме. Никаких костылей.

.shape {
  /* Старый способ */
  clip-path: shape() | polygon() | ...;

  /* Новый способ */
  border-shape: shape() | polygon() | ...;
}

Если вы уже знаете clip-path, вы уже знаете border-shape. Просто замените название свойства. Вот и всё.

Фигуры только из границ: никаких обходных путей

Хотите фигуру, состоящую только из границы? Напишите это:

.shape {
  border: 8px solid red;
  border-shape: /* ваша фигура */;
}

Никакой лишней разметки. Никаких SVG-наложений. Граница идеально повторяет форму — даже сложную. Я уже добавил версии только с границами в свою коллекцию CSS-фигур и онлайн-генераторы для блобов, волнистых линий и причудливых рамок.

Фигуры с вырезами: две фигуры, одно свойство

Вот где становится интересно. border-shape принимает две фигуры. Спецификация гласит:

Режим обводки (одна фигура): отображает границу как обводку вдоль пути фигуры.

Режим заливки (две фигуры): граница — это область между двумя путями. Первый определяет внешнюю границу, второй — внутреннюю.

Чтобы сделать вырез:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* код вашей фигуры */;
}

inset(0) выступает в роли внешнего прямоугольника. Ваша фигура становится внутренним вырезом. Хотите вырез внутри круга? Замените inset(0) на circle().

Стоп — разве нельзя просто использовать border-radius: 50%? Нет. Когда активен border-shape, border-radius игнорируется. Но, честно говоря, это нормально — вы можете воссоздать любую скруглённую форму напрямую с помощью border-shape.

Что это значит для владельцев бизнеса на Кипре / в ЕС

Если ваш сайт использует интерактивные элементы — кнопки нестандартной формы, карточки товаров с декоративными границами или графику с обрезанными визуальными элементами — border-shape сэкономит время разработки и снизит сложность CSS. Меньше кода означает более быструю сборку и снижение затрат на обслуживание. Для проектов, базирующихся в ЕС, помните: изменения в CSS не влияют на соответствие GDPR, но более простую кодовую базу легче аудировать. А поскольку мы обслуживаем англоязычную, русскоязычную и греческую аудиторию, многоязычные макеты выигрывают от адаптивных контейнеров, не зависящих от формы, которые не ломаются.

На данный момент поддержка есть только в Chrome, так что не выкатывайте это в продакшн. Но начинайте экспериментировать. Когда другие браузеры догонят, вы уже будете знать, как это использовать.

Попробуйте демо в Chrome. Поиграйте с конвертером фигур. Ваша следующая дизайн-система скажет вам спасибо.