Le CSS introduit une nouvelle propriété, corner-shape, qui complète border-radius en permettant de créer des coins plus variés que les simples arrondis classiques. Cette fonctionnalité offre des formes comme les coins biseautés (bevel), concaves (scoop), en squircle (style Apple) ou encore des entailles (notch), offrant ainsi plus de flexibilité pour le design d'interfaces. Contrairement aux solutions de contournement précédentes (SVG, clip-path), elle s'applique directement aux bordures, ombres et fonds, sans les inconvénients techniques comme les coupures d'ombres ou les animations fragiles.

L'auteur souligne que cette propriété reste progressive : elle nécessite border-radius pour fonctionner et n'est pas encore supportée par tous les navigateurs. Elle permet cependant de simplifier le code en évitant les hacks complexes, tout en offrant un contrôle précis via des valeurs comme superellipse() pour des ajustements fins. Une avancée majeure pour les développeurs front-end, à l'image de l'impact historique de border-radius il y a 15 ans.

Enfin, l'article insiste sur l'importance de l'amélioration progressive (progressive enhancement), cette fonctionnalité étant appelée à se généraliser progressivement dans les navigateurs. Une évolution bienvenue pour des interfaces plus riches et moins dépendantes des contournements techniques.

Découvrez comment combiner les animations scroll-driven et la propriété CSS corner-shape pour créer des effets visuels innovants, comme des coins qui se transforment en carrés ou en encoches au fil du défilement. L’article explique comment utiliser superellipse() pour générer des formes mathématiques animables (squircle, bevel, notch, etc.) et propose un exemple concret avec un pseudo-élément body::before et un mix de mix-blend-mode: difference. À noter : ces fonctionnalités nécessitent Chrome 139+ et Firefox devrait bientôt les supporter nativement. Une démo visuelle est incluse pour illustrer le résultat.