Générateur de border-radius

Qu’est-ce qu’un générateur de border-radius ?

Il propose des curseurs pour les quatre coins d’une boîte et écrit le CSS. Arrondissez les quatre de la même façon et vous obtenez une pilule ou un cercle ; arrondissez-les différemment et vous obtenez ces formes en goutte qu’on croise dans les bandeaux et les avatars.

Celui-ci ajoute la partie que les autres laissent de côté. CSS a une règle sur ce qui se passe quand les rayons demandés ne tiennent pas dans la boîte, et elle fait quelque chose de plus surprenant qu’un simple écrêtage. Le panneau sous l’aperçu vous montre le résultat de cette règle au fil de vos réglages.

Tout tourne dans votre navigateur. Rien n’est envoyé et il n’y a pas de compte.

Comment utiliser le générateur

1. Réglez la taille de la boîte. La largeur et la hauteur comptent davantage qu’on ne croit, car la question de savoir si vos rayons tiennent en dépend entièrement. Un rayon qui convient à une carte ne convient pas à un bouton.
2. Réglez les coins. Chaque coin a un curseur par défaut. Activez les coins elliptiques pour donner à chacun un rayon horizontal et un rayon vertical distincts — c’est à cela que sert la barre oblique dans la forme abrégée.
3. Lisez le panneau, puis copiez. Si le facteur d’échelle passe sous 1, les nombres barrés sont ce que vous avez demandé et ceux d’à côté ce qui est dessiné. Le bloc CSS est la déclaration prête à coller.

La règle qui modifie des coins auxquels vous n’avez pas touché

Prenez un bouton de 160 sur 44 avec 8px à chaque coin, et décidez que le coin supérieur gauche portera un grand arrondi de 40px. Vous changez une valeur. Ce qui est dessiné, c’est 36,7px sur ce coin — et 7,3px sur les trois autres.

Ce n’est ni un artefact d’arrondi ni une bizarrerie de navigateur. C’est dans la spécification. CSS Backgrounds and Borders Level 3 énonce que, lorsque les deux rayons qui se rejoignent sur un côté totalisent plus que la longueur de ce côté, on calcule f comme le plus petit rapport entre la longueur d’un côté et la somme de ses rayons, sur les quatre côtés, puis, si f est inférieur à 1, on multiplie par f le rayon de tous les coins de l’élément. Pas celui du coin fautif. Celui de tous.

La correction est donc globale. Poussez un coin au-delà de ce que la boîte peut contenir et toute la forme rétrécit proportionnellement, y compris des coins que vous n’avez pas modifiés et qui étaient parfaitement licites en eux-mêmes. Une fois qu’on le sait, bien du CSS presque juste s’explique.

Le cas le plus connu est celui du cercle demandé sur une boîte qui n’est pas carrée. Mettez 100px aux quatre coins d’une boîte de 200 sur 100 et f vaut exactement 0,5 : chaque coin est dessiné à 50px, un stade et non un cercle. On l’explique d’ordinaire en disant que le rayon est plafonné à la moitié de la hauteur. Cette description donne ici la bonne réponse par hasard, et la règle est autre : c’est un facteur unique appliqué à tout, ce qui explique qu’elle modifie aussi les coins du grand côté.

La frontière mérite d’être connue précisément. La spécification dit que la réduction ne s’applique que si f est inférieur à 1 : un cercle sur un carré — 50px sur une boîte de 100 sur 100 — se situe exactement sur la limite et n’est pas réduit du tout. Un pixel de plus et f devient 0,9901, et tous les coins commencent à rétrécir. Cet outil suit la spécification sur ce bord plutôt que de l’arrondir.

Limites assumées

L’aperçu est un vrai élément avec un vrai border-radius : ce que vous voyez, c’est votre propre navigateur qui le dessine. Mais les nombres du panneau sont calculés d’après la spécification, non relus depuis le navigateur. C’est délibéré, car il n’y a rien à relire : la réduction a lieu au moment de peindre la boîte, et la valeur qu’une feuille de style déclare est celle que vous avez posée.

Tout est ici en pixels. Les pourcentages sont valides dans border-radius et se résolvent d’après la largeur et la hauteur de la boîte, ce qui en fait le meilleur choix pour tout ce qui est adaptatif, mais ils transforment la question de savoir si vos rayons tiennent en une question qui change avec la fenêtre. Avec des pourcentages, la règle s’applique toujours ; simplement, un aperçu figé ne la montre pas.

L’outil modélise une boîte nue. Ni bordures, ni marge intérieure, ni la différence entre la courbe extérieure et l’intérieure : un vrai élément à bordure épaisse possède un second rayon, plus petit, sur l’arête interne, que la spécification obtient en retranchant l’épaisseur de la bordure. C’est une part légitime de border-radius, et hors du champ d’un générateur.

Il n’y a pas de squircle ici, et il ne peut pas y en avoir. Les formes doucement arrondies du matériel Apple sont des superellipses, une famille de courbes différente du quart d’ellipse que CSS spécifie, et aucune combinaison de valeurs de border-radius n’en reproduira une. Obtenir cet aspect sur le web demande un clip-path ou un SVG, et tout outil promettant un squircle à partir du seul border-radius promet ce que la propriété ne sait pas faire.

Le moteur porte 30 assertions. La principale n’est pas une table de sorties attendues mais la propriété que la règle existe pour garantir : sur 20 000 boîtes aléatoires, les deux rayons d’un côté ne totalisent jamais plus que la longueur de ce côté après réduction — assortie d’un contrôle confirmant que les mêmes entrées la violent auparavant, afin que le test ne puisse être satisfait par une fonction qui ramènerait tout à zéro. Un sabotage délibéré écrêtant chaque coin séparément, ce que font plusieurs générateurs, met cette suite en défaut à quatre endroits.

Pourquoi est-ce gratuit ?

Quatre curseurs et une division, c’est un travail que votre machine fait instantanément. Rien n’est envoyé, il n’y a pas de compte, et rien à filigraner.

Si vous cherchez des couleurs plutôt que des coins, le générateur de dégradés et le convertisseur de couleurs de ce site sont juste à côté, sans rien envoyer non plus.