Générateur border-radius CSS : créer des coins arrondis modernes
Le rôle du border-radius dans le design d'interface
La propriété border-radius est devenue un élément fondamental du design d'interface moderne. Introduite avec CSS3, elle permet d'arrondir les coins de n'importe quel élément HTML, transformant des rectangles rigides en formes plus douces et plus accueillantes. Les coins arrondis réduisent la tension visuelle et guident naturellement le regard le long des bords de l'élément.
Les grandes entreprises technologiques ont chacune leur approche du border-radius. Apple utilise des squircles (superellipses continues) pour ses icônes, Google privilégie des arrondis modérés dans Material Design, et Microsoft a adopté des coins légèrement arrondis avec Fluent Design.
border-radius: haut-gauche haut-droite bas-droite bas-gauche; (4 valeurs en sens horaire)
Les formes classiques et leurs valeurs
Le border-radius permet de créer de nombreuses formes géométriques, du simple arrondi au cercle parfait. Voici les formes les plus utilisées en design web et les valeurs qui les produisent.
Valeurs de border-radius courantes en UI design
Source : analyse des design systems majeurs (Material, Apple HIG, Fluent)
99,6 %
Compatibilité navigateur de la propriété border-radius (Can I Use, 2026)
Cercles, pilules et squircles : quelle forme choisir
Le cercle s'obtient en appliquant border-radius: 50% à un élément carré (largeur = hauteur). C'est la forme idéale pour les avatars et les icônes. La pilule (pill button) utilise une valeur très élevée comme border-radius: 9999px sur un rectangle, ce qui arrondit complètement les côtés courts tout en préservant les côtés longs.
Cercle (50%)
50%
Nécessite un élément carré
Pilule (9999px)
9999px
Fonctionne sur tout rectangle
Le squircle (superellipse) est une forme intermédiaire entre le carré arrondi et le cercle, popularisée par Apple pour ses icônes iOS. Le CSS standard ne produit pas de vrais squircles, car border-radius utilise des arcs de cercle (la courbure commence abruptement). Pour obtenir un vrai squircle, il faut recourir à un SVG avec un path de superellipse ou à la future propriété CSS corner-shape: squircle (en cours de spécification).
Exemple concret : concevoir un bouton arrondi responsive
Voici les étapes pour créer un bouton pill responsive qui s'adapte à son contenu :
Structure HTML
HTMLUn bouton avec padding horizontal généreux (px-6 py-2.5)
Border-radius en px
9999pxborder-radius: 9999px pour un effet pilule quelle que soit la hauteur
Ajuster le padding
px > pyLe padding horizontal doit être au moins 1,5x le padding vertical
Tester en responsive
ResponsiveVérifier que le bouton ne déborde pas sur petits écrans (max-width: 100%)
Tendances UI modernes pour les coins arrondis
Les design systems de 2026 convergent vers des valeurs de border-radius plus élevées qu'il y a quelques années. Les cartes utilisent couramment 16 à 24px de rayon, là où 4 à 8px étaient la norme en 2018. Cette tendance, parfois appelée "blobby UI", donne aux interfaces un aspect plus organique et accessible.
Combiner le border-radius avec des ombres CSS subtiles et des couleurs harmonieuses est la clé d'un design de carte réussi. L'arrondi adoucit la forme, l'ombre crée la profondeur, et les couleurs définissent la hiérarchie.
Astuce pour les valeurs elliptiques
border-radius: 50px / 25px (avec un slash) crée des coins elliptiques : 50px horizontal et 25px vertical. C'est utile pour les formes en goutte d'eau ou les onglets à courbure asymétrique.Erreurs fréquentes à éviter
- Utiliser 50% sur un rectangle : cela crée une ellipse, pas un cercle. Pour un cercle parfait, l'élément doit être carré (width = height).
- Oublier le overflow: hidden : un enfant avec un fond ou une image débordera des coins arrondis du parent si
overflow: hiddenn'est pas appliqué. - Mélanger les unités : utiliser des px pour certains coins et des % pour d'autres produit des résultats imprévisibles lors du redimensionnement.
- Arrondir trop les inputs : un border-radius supérieur à 12px sur un champ de saisie peut donner l'impression d'un bouton et perturber l'utilisateur.
- Négliger la cohérence : utilisez des tokens de design (variables CSS) pour vos valeurs de border-radius. Une carte à 16px et un bouton à 17px créent une incohérence visuelle subtile mais perceptible.
Sources et références
- MDN Web Docs, border-radius : documentation complète de la propriété.
- W3C, CSS Backgrounds and Borders Level 3 : spécification officielle.
- Google Developers, web.dev : guide pratique sur border-radius.
- CSS-Tricks : exemples avancés et cas d'usage.