clip-path и маски имитируют форму блока, но рамки и тени с ними не работают. border-shape меняет реальную форму — и всё работает из коробки. Разбираем, почему border-radius до сих пор единственное свойство, которое реально меняет форму элемента. CSS-маски и clip-path лишь скрывают части блока — визуальная иллюзия. Рамки, тени, outline не знают о вырезах и ведут себя как с прямоугольником. Новая функция shape() умеет описывать произвольные контуры в CSS-нотации: закруглённые части, переменные, единицы измерения. А свойство border-shape по аналогии с border-radius применяет shape() к реальной форме блока. Черновик спецификации уже есть, первые прототипы работают в Chrome Canary. Таймкоды: - 00:00 — Введение - 00:24 — Старые методы создания форм - 01:16 — Преимущества CSS-масок - 01:42 — Ограничения CSS-клипа - 03:20 — Новая функция shape - 04:15 — Проблемы с CSS-масками и клипом - 05:52 — Идея border-shape - 07:07 — Реализация border-shape - 09:15 — Заключение Ссылки: - Рамки и фоны, часть 2 → https://www.youtube.com/watch?v=iNmNoYIpEiY - Спецификация CSS Borders Level 4 — border-shape → https://www.w3.org/TR/css-borders-4/#border-shape-func - Статья Криса Койера про shape() → https://frontendmasters.com/blog/modern-css-round-out-tabs/ - Чемпионат по вёрстке — профессиональный трек → https://htmlacademy.ru/contest/3/professional-track - Канал в Телеграме → https://t.me/cssbol Подписывайтесь на канал, чтобы не пропустить новые выпуски CSS Боли! #css #bordershape #clippath #shapes #frontend