CSS corner-shape : Le guide complet pour sculpter vos interfaces
Pendant longtemps, le Web a utilisé une seule forme pour les coins : l’arc de cercle. La propriété border-radius est
très utile, mais elle est limitée. Elle ne peut pas créer d’angles droits coupés (biseaux) ou de formes plus complexes
sans aide extérieure.
La propriété corner-shape change cela. Elle permet de choisir la forme du coin sans changer sa taille. C’est
une révolution pour la performance car tout est géré nativement par le navigateur.
Pourquoi utiliser corner-shape ?
Auparavant, pour créer un coin biseauté, nous utilisions des images ou des masques complexes. Ces méthodes ralentissent
le site. corner-shape offre trois avantages :
- Rapidité : le navigateur dessine la forme directement.
- Légèreté : moins de code et pas d’images à charger.
- Flexibilité : la forme s’adapte automatiquement à la taille du bloc.
Voici un exemple de code fluide et performant :
.card {
background-color : #1a1a1a;
border-radius : clamp(1rem * $font-size, 5vi, 3rem * $font-size);
corner-shape : bevel;
inline-size : 100%;
padding : 2rem * $font-size;
}
Les quatre formes de base
La propriété corner-shape propose quatre mots-clés simples. Chaque mot-clé change la façon dont le coin est tracé.
1. Le mode Round (arrondi)
C’est la valeur par défaut. Le navigateur dessine un quart de cercle. C’est ce que fait border-radius tout seul.
2. Le mode Bevel (biseau)
Le biseau coupe le coin avec une ligne droite. C’est idéal pour les designs modernes ou industriels. Le calcul est très simple pour le processeur graphique (GPU), ce qui rend l’affichage instantané.
3. Le mode Scoop (creusé)
Le mode scoop crée un arrondi vers l’intérieur. Imaginez qu’on retire un morceau de cercle au coin du bloc. C’est très
difficile à faire sans cette propriété.
4. Le mode Notch (encoche)
L’encoche crée une découpe en forme d’escalier. Le coin est composé de deux lignes droites qui se rejoignent à l’intérieur du bloc.
La superellipse : le secret du design haut de gamme
La fonction superellipse() est la partie la plus technique de corner-shape. Elle permet de créer des courbes très
douces, souvent appelées “squircles”.
C’est quoi une superellipse ?
C’est une forme mathématique entre le carré et le cercle. Contrairement à un cercle, la courbe commence très doucement. Il n’y a pas de cassure visible entre la ligne droite et le début du coin. Apple utilise beaucoup cette forme pour ses icônes et ses produits.
.premium-box {
aspect-ratio : 1 / 1;
border-radius : 20%;
corner-shape : superellipse(2.5);
inline-size : min(20rem * $font-size, 80vi);
}
Dans ce code, le chiffre 2.5 est l’exposant mathématique.
- Si le chiffre est 2, c’est un cercle parfait.
- Plus le chiffre augmente, plus le coin devient “plein” et s’approche d’un carré.
Comment le navigateur affiche ces formes ?
Pour garantir une performance maximale, il faut comprendre ce qui se passe dans le navigateur.
Le pipeline de rendu
Quand vous utilisez corner-shape, le navigateur suit ces étapes :
- Calcul du layout : Il définit la taille du bloc (le rectangle).
- Phase de painting : Il dessine la bordure avec la forme choisie.
L’avantage de corner-shape est qu’elle n’affecte pas l’étape de layout. Le bloc garde la même taille, peu importe
la forme du coin. Cela évite au navigateur de refaire tous les calculs de position si la forme change, par exemple lors
d’un survol (hover).
Accélération matérielle
Le tracé des formes comme le biseau ou la superellipse est envoyé directement au GPU. Le GPU est conçu pour dessiner des vecteurs très rapidement. C’est bien plus efficace que d’utiliser des filtres ou des masques JavaScript.
Accessibilité et confort visuel
Un bon code doit être lisible par tous, y compris par les outils d’assistance.
Le contour de sélection
Un gros problème avec les anciennes techniques était que l’anneau de sélection (quand on utilise la touche Tab) restait
rectangulaire. Avec corner-shape, le navigateur adapte l’anneau de focus à la forme du coin.
.interactive-element:focus-visible {
outline : .2rem * $font-size solid #4a90e2;
outline-offset : .4rem * $font-size;
}
Unités fluides
Nous utilisons rem et la variable $font-size pour que les coins s’adaptent à la taille du texte de l’utilisateur. Si
une personne augmente la taille de la police dans son navigateur pour mieux lire, les coins resteront proportionnels et
l’interface restera propre.
Résumé pour le développeur
Pour optimiser votre interface avec corner-shape, retenez ces points :
- Utilisez bevel pour un look technique et une performance maximale.
- Utilisez superellipse pour un look doux et luxueux.
- Utilisez des unités relatives (
rem) pour que le design soit accessible. - Évitez les images de coins pour gagner des millisecondes précieuses au chargement.
corner-shape est l’outil parfait pour allier un design complexe à une vitesse de chargement incroyable. C’est l’avenir
du design web haute performance.
Questions fréquentes (FAQ)
Est-ce que corner-shape fonctionne avec les ombres (box-shadow) ?
Oui. L'ombre suit exactement la forme du coin. Si vous faites une encoche, l'ombre aura aussi une encoche. C'est
automatique et très rapide.
Est-ce que cela remplace border-radius ?
Non. Les deux travaillent ensemble. border-radius définit la taille de la zone du coin, et
corner-shape définit le style du tracé dans cette zone.
Pourquoi la performance est-elle meilleure qu'avec SVG ?
Parce que le moteur CSS du navigateur traitecorner-shape comme une instruction de dessin de base. Un
fichier SVG doit être lu, analysé et transformé en pixels, ce qui prend plus de temps et de mémoire.
