Générateur border-radius CSS

Comment ça marche

Saisissez une couleur de boîte à gauche — elle ne sert qu’à peindre l’aperçu, car border-radius ne transporte aucune couleur. Réglez ensuite les quatre curseurs. En mode coins arrondis, les valeurs sont des pixels et l’outil écrit la forme la plus courte valide : quatre coins égaux se réduisent à un seul border-radius: 16px, des diagonales égales à deux valeurs. Pour les cartes et les boutons, la plage habituelle va de 8 à 24 pixels ; la valeur par défaut de 16 pixels s’y trouve au milieu. En mode blob, les valeurs deviennent des pourcentages : chaque curseur fixe le rayon HORIZONTAL de son coin, l’outil calcule le rayon vertical comme 100 moins votre valeur, et le code sort dans la syntaxe à barre oblique avec deux listes — la notation qui donne deux rayons différents à un coin et transforme le rectangle en goutte organique. Le code de droite se réécrit à chaque changement : copiez-le dans votre feuille de style, ou téléchargez l’aperçu en PNG de 1200×800 pixels.

Cet outil est aussi connu sous le nom de coins arrondis css, border radius css, arrondir les angles css, border radius exemples.

Qu'est-ce que border-radius ?

border-radius est la propriété CSS qui arrondit les coins d’une boîte HTML. Une seule valeur s’applique aux quatre coins ; jusqu’à quatre valeurs règlent chaque coin séparément, et la forme à barre oblique donne à chaque coin deux rayons — un horizontal et un vertical. Les valeurs s’écrivent en unités fixes comme le pixel ou en pourcentages de la taille de la boîte, raison pour laquelle 50 % transforme un carré en cercle. L’arrondi est un pur dessin : il ne déplace pas la mise en page et ne change pas les dimensions de la boîte.

Qu'est-ce que Forme blob ?

Blob est le nom que le design web donne aux formes douces et organiques qui évoquent une goutte ou un galet plutôt qu’un rectangle. En CSS, un blob naît d’une seule boîte avec un border-radius à barre oblique : chaque coin reçoit un rayon horizontal et un rayon vertical différents, les coins deviennent des quarts d’ellipse et la silhouette rectangulaire disparaît. Les blobs servent surtout aux sections de couverture, aux cadres de portrait et aux fonds décoratifs — et comme la forme est du code, elle n’exige aucun fichier image et reste nette à toutes les tailles.

Quelle est la différence entre un rayon en pixels et en pourcentage ?

Le rayon en pixels est absolu : un coin de 16 pixels garde la même taille, que la boîte fasse 200 ou 1000 pixels de large — c’est ce qui garde une famille de cartes cohérente. Le pourcentage se rapporte à la boîte elle-même : les rayons horizontaux se mesurent sur la largeur, les verticaux sur la hauteur. Voilà pourquoi 50 % produit un cercle sur une boîte carrée mais une ellipse sur un rectangle, et pourquoi le coin grandit avec la boîte. Règle pratique : pixels pour les composants d’interface, pourcentages pour le travail de forme — cercles et blobs.

La règle de débordement : pourquoi 100 pixels ne font plus rien

Poussez un curseur au bout : à un moment, la forme ne bouge plus. Ce n’est pas un bogue, c’est la règle de débordement de CSS : quand la somme des deux rayons d’un même bord dépasse la longueur du bord, le navigateur réduit TOUS les rayons du même facteur. Un bouton de 200 pixels de large loge exactement 100 + 100 pixels ; sur une carte de 300 pixels, les mêmes coins ont encore de la marge. L’aperçu applique la même règle — la forme affichée est celle que le navigateur dessinera.

Si ce que vous voulez est un cercle ou une pilule, laissez tomber le calcul en pixels : border-radius: 50% change une boîte carrée en cercle, et border-radius: 999px change un bouton rectangulaire en pilule. Une valeur démesurée comme 999 est sûre justement grâce à la règle de débordement — le navigateur la ramène au plus grand rayon qui tient.

Quel rayon pour quel usage ?

Le rayon des coins parle une langue, comme l’ombre : petit rayon, sérieux ; grand rayon, douceur.

• Cartes, panneaux, champs de saisie → 8-16 pixels : le coin se voit sans attirer l’œil
• Boutons → 8-12 pixels, ou 999 pixels pour la pilule : les deux sont courants, mais gardez une seule langue par page
• Avatars et badges → 50 % : un contenu carré devient un cercle parfait
• Visuels de couverture et fonds décoratifs → mode blob : la syntaxe à barre oblique construit des formes organiques

Questions fréquentes

Que signifie l’ordre des valeurs de border-radius ?

Quatre valeurs tournent dans le sens horaire depuis le haut gauche : haut gauche, haut droit, bas droit, bas gauche. Avec moins de valeurs, les coins manquants copient leur diagonale : avec deux valeurs, la première règle haut-gauche et bas-droit, la seconde l’autre paire. Cet outil écrit toujours la forme valide la plus courte — le code raccourcit à mesure que les curseurs s’égalisent.

C’est quoi la syntaxe à barre oblique (30% 70% ... / 70% 30% ...) ?

À gauche de la barre se trouvent les rayons horizontaux des coins, à droite les rayons verticaux. Quand les deux diffèrent, le coin ne dessine plus un quart de cercle mais un quart d’ellipse — c’est exactement de là que vient l’allure organique des blobs. En mode blob, cet outil calcule la liste verticale comme 100 moins votre valeur horizontale : un curseur à 30 donne un rayon vertical de 70. La règle est fixe, le résultat prévisible.

Pourquoi ma couleur n’apparaît-elle pas dans le code ?

Parce que border-radius ne décrit que la géométrie des coins ; la couleur relève de propriétés séparées comme background-color. Le champ de couleur peint l’aperçu pour que vous jugiez la forme sur une vraie surface. Une fois le code collé, les coins s’appliquent à la couleur que votre élément possède déjà.

Que sauvegarde le bouton Télécharger ?

Un PNG de 1200×800 pixels de la forme prévisualisée — pratique pour glisser le style de coins dans une revue de maquette. Pour le code lui-même, utilisez le bouton de copie ; et pour arrondir les coins d’un vrai fichier image, c’est l’outil d’arrondi d’image de ce site qui s’en charge.