Générateur de Border Radius

Faites glisser les curseurs pour arrondir chaque coin du cadre d'aperçu et copiez le CSS border-radius obtenu. Verrouillez les quatre coins ensemble pour un simple rectangle arrondi, ou déverrouillez-les pour créer des formes de pilule, de feuille ou des taches asymétriques.

En quoi consiste cet outil ?

border-radius est la propriété CSS qui arrondit les coins d'un élément. Écrite à la main, elle prend quatre valeurs dans un ordre fixe — haut gauche, haut droit, bas droit, bas gauche — un ordre facile à inverser, surtout quand les quatre coins diffèrent.

Cet outil supprime les approximations : déplacez un curseur, regardez le coin s'arrondir dans l'aperçu en direct, et lisez le CSS exact dans le bloc de code généré. Un interrupteur de verrouillage bascule entre un rayon uniforme (les quatre coins identiques, le cas le plus courant) et quatre curseurs indépendants pour des formes organiques et asymétriques.

Pourquoi l'utiliser ?

L'aperçu se met à jour instantanément pendant que vous glissez — pas besoin d'éditer le CSS puis de recharger pour voir le résultat.
Verrouillage en un clic pour le cas courant du 'même rayon sur chaque coin' ; déverrouillez pour des boutons en pilule, des bulles de dialogue et des formes organiques.
Génère la forme abrégée à valeur unique quand tous les coins correspondent, ou la forme complète à quatre valeurs sinon — prêt à copier-coller dans les deux cas.
Fonctionne entièrement dans votre navigateur. Rien de ce que vous saisissez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Laissez 'verrouiller les 4 coins' coché et faites glisser n'importe quel curseur pour fixer un rayon uniforme sur tout le cadre.
Décochez le verrou pour contrôler chaque coin indépendamment — utile pour les pilules, les gouttes et les cartes asymétriques.
Observez le cadre d'aperçu se mettre à jour en direct pendant que vous ajustez chaque curseur.
Copiez le CSS généré dans le bloc de code et collez-le dans votre feuille de style.

Exemple

Entrée

Haut gauche : 40px, Haut droit : 8px, Bas droit : 40px, Bas gauche : 8px

Résultat

border-radius: 40px 8px 40px 8px;

Des coins opposés inégaux comme ceux-ci créent une silhouette de feuille ou de pétale — un effet courant dans les cartes et les badges.

px ou % — quelle unité utiliser ?

Ce générateur produit des valeurs en pixels, le bon choix par défaut pour la plupart des interfaces : boutons, cartes et champs où l'on veut un rayon fixe et prévisible, quelle que soit la taille de l'élément.

Les pourcentages se comportent différemment — ils sont relatifs à la largeur et à la hauteur propres de l'élément, donc un rayon de 50% sur un élément carré produit un cercle parfait, et sur un élément non carré, une ellipse. Pour cet effet (avatars, formes organiques qui s'adaptent au conteneur), prenez le CSS généré et remplacez les valeurs px par une valeur % à la main — par exemple border-radius: 50% transforme n'importe quel carré en cercle.

Modèles courants de border-radius

Carte arrondie : tous les coins égaux, environ 8 à 16px pour les composants d'interface.
Bouton en pilule : réglez le rayon à la moitié de la hauteur de l'élément (ou utilisez simplement 9999px, qui produit une pilule complète quelle que soit la hauteur).
Avatar circulaire : border-radius: 50% sur un élément carré (largeur et hauteur égales).
Bulle de dialogue : trois coins arrondis, un coin droit — mettez trois curseurs élevés et un à 0.
Forme de feuille / pétale : coins opposés identiques, coins adjacents différents — par exemple haut gauche et bas droit grands, haut droit et bas gauche petits.

À associer avec une ombre

Les coins arrondis apparaissent rarement seuls — cartes et boutons ont souvent aussi besoin d'un peu d'ombre pour donner de la profondeur. Utilisez le Générateur de Box Shadow pour régler une ombre portée et appliquez les deux morceaux de CSS générés au même élément.

→ Générateur de Box Shadow · Convertisseur d'unités

Foire aux questions

Quel est l'ordre des coins dans border-radius ?

La forme abrégée CSS suit toujours l'ordre haut gauche, haut droit, bas droit, bas gauche, dans le sens horaire à partir du coin supérieur gauche. Les quatre curseurs de cet outil sont étiquetés selon le même ordre, donc vous n'avez jamais besoin de le mémoriser vous-même.

Puis-je utiliser des unités différentes pour chaque coin ?

Oui, en CSS réel vous pouvez mélanger px, %, em et rem entre les coins, même si c'est rare en pratique. Cet outil génère des valeurs px uniformes par simplicité — remplacez une valeur individuelle par % ou une autre unité directement dans votre feuille de style si vous avez besoin d'unités mixtes.

Pourquoi border-radius: 50% donne-t-il parfois un ovale plutôt qu'un cercle ?

Parce que les pourcentages sont relatifs à chaque axe indépendamment — le rayon horizontal est un pourcentage de la largeur de l'élément, le rayon vertical un pourcentage de sa hauteur. Sur un élément carré (largeur et hauteur égales), cela produit un cercle parfait ; sur un rectangle, une ellipse.

border-radius fonctionne-t-il aussi sur les images de fond et les bordures ?

Oui — border-radius découpe l'arrière-plan, la bordure et (dans les navigateurs modernes) le box-shadow de l'élément selon la forme arrondie. Il ne découpe pas le contenu enfant qui déborde, sauf si vous appliquez aussi overflow: hidden au parent.

Y a-t-il une limite à la taille du rayon ?

Aucune limite stricte — si le rayon dépasse la moitié de la largeur ou de la hauteur de l'élément, les navigateurs le plafonnent pour que les deux courbes de ce côté se rejoignent exactement au milieu, c'est ainsi qu'un carré devient un cercle parfait ou une pilule.