Générateur de border-radius CSS avec aperçu
Arrondissez les coins visuellement et copiez le CSS. Contrôle par coin, rayons elliptiques, px ou %, préréglages de la pilule au blob, aperçu en direct.
Chargement de Générateur de border-radius CSS avec aperçu… Si rien ne se passe, activez JavaScript.
La propriété CSS border-radius arrondit les coins d'un élément, et c'est l'une des rares propriétés qui change le caractère d'une interface entière. Les boutons paraissent plus avenants avec 8 pixels d'arrondi, les cartes semblent modernes entre 12 et 16, les avatars deviennent des cercles à 50 pour cent, et les étiquettes se transforment en pilules dès que le rayon dépasse la moitié de la hauteur. Ce générateur vous permet de régler ces valeurs à l'aide de curseurs et de champs numériques tout en observant le résultat immédiatement, puis de copier une seule ligne de CSS à coller dans votre feuille de styles. Aucune inscription, aucune étape d'export, et rien ne quitte votre navigateur.
Questions fréquentes
Comment créer un cercle avec border-radius ?
À quoi sert la barre oblique dans une valeur de border-radius ?
Faut-il utiliser des pixels ou des pourcentages ?
Dans quel ordre les quatre valeurs s'appliquent-elles ?
Pourquoi mon rayon paraît-il plus petit que la valeur saisie ?
border-radius rogne-t-il le contenu de l'élément ?
Le CSS est-il compatible avec les anciens navigateurs ?
Puis-je l'utiliser pour des images et des boutons ?
Quelque chose est-il téléversé ?
À propos de Générateur de border-radius CSS avec aperçu
border-radius est plus riche que ce que la plupart des gens en font. Chacun des quatre coins peut être réglé indépendamment, ce qui permet d'obtenir des formes de feuille, des bulles de dialogue, des tickets de cinéma et des cartes asymétriques. Chaque coin peut aussi être elliptique plutôt que circulaire, c'est-à-dire recevoir un rayon horizontal et un rayon vertical, écrits avec une barre oblique : border-radius: 60px 20px 60px 20px / 30px 60px 30px 60px. C'est cette syntaxe à barre que produit ici l'option "Coins elliptiques", et c'est l'astuce derrière les formes organiques que l'on voit sur les pages d'accueil modernes. Le préréglage "Blob" génère huit valeurs aléatoires, à relancer jusqu'à ce que le résultat vous plaise.
Le choix entre pixels et pourcentages compte plus qu'il n'y paraît. Un rayon en pixels est absolu : 20px restent 20px, que l'élément soit un petit badge ou un large panneau. Un rayon en pourcentage est relatif aux dimensions de l'élément lui-même, horizontalement à sa largeur et verticalement à sa hauteur, si bien que 50% produit toujours une ellipse parfaite et qu'une forme définie en pourcentages conserve ses proportions lorsque l'élément est redimensionné. C'est pourquoi les avatars sont généralement à 50% tandis que les boutons utilisent une valeur fixe en pixels. Servez-vous du sélecteur d'unité pour voir la différence : redimensionnez la boîte d'aperçu avec les curseurs de largeur et de hauteur et observez comment une forme en pourcentage s'adapte alors qu'une forme en pixels reste figée.
Tout est dessiné dans votre navigateur par le moteur CSS qui rendra votre site : l'aperçu n'est donc pas une approximation, c'est le résultat réel. Utilisez le fond en damier pour juger les formes sur de la transparence, activez le fond image pour voir comment une photo est rognée par les coins, et copiez le CSS quand le rendu vous convient. Si vous saisissez un rayon plus grand que ce que l'élément peut accueillir, les navigateurs réduisent tous les rayons proportionnellement au lieu de les faire se chevaucher, et c'est pour cela qu'une très grande valeur en pixels sur une boîte basse donne une pilule nette plutôt qu'une forme cassée.
La longue bataille des coins arrondis
Les coins arrondis ont été une obsession du design bien avant que le CSS sache les produire. En 1981, alors qu'il construisait le premier Macintosh, Bill Atkinson avait écrit des routines rapides pour tracer des cercles et des ovales, mais il refusait d'ajouter les rectangles arrondis parce que les calculs lui semblaient trop lents. Steve Jobs l'a emmené faire le tour du pâté de maisons en désignant les rectangles arrondis des panneaux de signalisation et des vitres de voiture jusqu'à ce qu'Atkinson cède ; les routines RoundRects qui en sont nées ont façonné l'allure de l'interface du Mac et, par ricochet, de l'informatique graphique.
Sur le web, l'attente fut longue. Au début des années 2000, une boîte arrondie signifiait découper une maquette en images de coins dans Photoshop puis les recoudre avec des div imbriquées, une approche si répandue qu'elle avait un nom : la technique des portes coulissantes. Certains développeurs fabriquaient les coins avec des tableaux, d'autres avec des bibliothèques JavaScript qui les dessinaient à l'exécution. border-radius a été proposé pour CSS3 et livré d'abord derrière des préfixes propriétaires, -moz-border-radius dans Firefox en 2005 puis -webkit-border-radius dans Safari, si bien que les feuilles de styles réelles ont porté trois copies de chaque déclaration de coin pendant des années. Internet Explorer ne l'a pris en charge qu'à partir de la version 9, sortie en 2011, moment où la plupart des équipes ont enfin supprimé leurs images de coins.
Le débat visuel ne s'est jamais vraiment arrêté, il s'est déplacé. Les icônes d'Apple sont passées de coins circulaires simples à un squircle, une superellipse dont la courbure varie continûment au lieu de sauter du bord droit à l'arc, parce que la jonction paraît plus douce à l'œil. Les designers courent après cet effet en CSS depuis, à l'aide de rayons elliptiques, de tracés SVG et désormais de la propriété expérimentale corner-shape. Pendant ce temps, le pendule du goût continue d'osciller : l'ère du flat design du milieu des années 2010 avait ramené les rayons presque à zéro, et la préférence actuelle pour des interfaces douces et accueillantes les a fait remonter. La propriété tient sur une ligne de CSS, mais le nombre qu'on y écrit se discute depuis quarante ans.