Générateur de border-radius CSS
Ce générateur de border radius CSS règle l’arrondi de tous les coins à la fois ou de chaque coin séparément, en pixels ou en pourcentage, et au besoin de façon elliptique avec des rayons horizontal et vertical distincts. Le générateur écrit la valeur sous sa forme valide la plus courte, affiche les quatre propriétés détaillées et calcule les rayons réellement utilisés par le navigateur pour la taille de votre boîte.
Source : css-backgrounds-3, § 4.1, W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties. Mise à jour : .
Comment le calcul est fait
Comment le navigateur lit border-radius
La forme raccourcie accepte une à quatre valeurs dans l’ordre haut gauche, haut droite, bas droite, bas gauche – dans le sens des aiguilles d’une montre. Les valeurs manquantes se complètent comme pour margin :
Créer des coins arrondis en 3 étapes
- Réglez un rayon commun à tous les coins ou dissociez-les pour régler chaque coin séparément, en px ou en %.
- Pour des coins elliptiques, choisissez séparément le rayon horizontal et vertical et saisissez la largeur et la hauteur de la boîte.
- Copiez la déclaration CSS la plus courte et vérifiez quels rayons le navigateur utilise réellement pour cette taille de boîte.
| Valeur | Signification |
|---|---|
12px | les quatre coins à 12 px |
24px 8px | haut gauche et bas droite 24 px, haut droite et bas gauche 8 px |
24px 8px 4px | haut gauche 24 px, haut droite et bas gauche 8 px, bas droite 4 px |
40px 10px / 20px 5px | elliptique : rayons horizontaux avant la barre oblique, verticaux après |
Le générateur ramène chaque saisie à la forme équivalente la plus courte : 10px 10px 10px 10px devient 10px, et une barre oblique suivie des mêmes valeurs disparaît.
Pourcentages : largeur et hauteur séparées
Les pourcentages se rapportent à la largeur de la boîte à l’horizontale et à sa hauteur à la verticale. 50% transforme donc un carré en cercle, mais un rectangle de 240 × 160 px en ellipse de 120 px et 80 px de rayon. Pour un arrondi circulaire sur un rectangle, utilisez des pixels.
Quand les arrondis se chevauchent
Si deux rayons voisins dépassent ensemble la longueur du côté, la spécification du W3C impose au navigateur de réduire tous les rayons du même facteur f = min(longueur du côté ÷ somme des deux rayons de ce côté).
Exemple « pilule » border-radius: 9999px sur un bouton de 200 × 40 px : à gauche et à droite, la somme vaut 9999 + 9999 = 19 998 px pour 40 px de hauteur, soit f = 40 ÷ 19 998 ≈ 0,002. Chaque coin reçoit 9999 × f = 20 px – exactement la moitié de la hauteur, les extrémités sont des demi-cercles. La rubrique « Rayons utilisés » affiche ces valeurs pour votre boîte.
Autres outils CSS : créez des ombres avec le générateur de box-shadow CSS, des dégradés avec le générateur de dégradé CSS et convertissez HEX, RGB ou HSL avec le convertisseur de couleurs.
Questions fréquentes
Comment faire un cercle en CSS ?
Appliquez border-radius: 50% à un élément carré. Sur un rectangle, 50 % donne une ellipse ; pour des bouts arrondis (forme de pilule), prenez une très grande valeur en pixels comme 9999px.
Que signifie la barre oblique dans border-radius ?
Elle sépare les rayons horizontaux des rayons verticaux. 40px / 20px arrondit chaque coin en quart d’ellipse, 40 px de large et 20 px de haut. Avec jusqu’à quatre valeurs de chaque côté, on obtient huit valeurs.
Pourquoi l’arrondi est-il plus petit que prévu ?
Parce que les arrondis se chevaucheraient. Le navigateur réduit alors tous les rayons dans la même proportion – même les coins qui auraient tenu seuls. Le générateur affiche le facteur et les rayons réellement utilisés.
Dans quel ordre sont les quatre valeurs ?
Haut gauche, haut droite, bas droite, bas gauche – dans le sens des aiguilles d’une montre. Les propriétés détaillées sont border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius.
Comment arrondir un seul coin en CSS ?
Réglez les coins séparément et laissez les autres à 0. Seul le coin inférieur gauche arrondi donne border-radius: 0 0 0 12px, ce qui équivaut à border-bottom-left-radius: 12px.
Sources et références juridiques
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Dernière mise à jour : · Principes éditoriaux
Outils similaires
- Générateur de box-shadow CSSCréez des ombres CSS au curseur : plusieurs ombres, décalage, flou, étendue, couleur avec transparence, inset et modèles – aperçu en direct et CSS à copier.
- Générateur de dégradé CSSCréez des dégradés CSS : linéaires, radiaux ou coniques, autant d’arrêts de couleur que voulu, angle et couleur de repli – aperçu en direct et CSS à copier.
- Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJNConvertissez vos couleurs : HEX en RGB, RGB en HEX, HSL, HSV, HWB et CMJN. Saisie dans tout format ou via le sélecteur, résultat à copier, dans le navigateur.
- Quelle est mon adresse IP ?Affiche instantanément votre adresse IP publique, détecte IPv4 ou IPv6 et explique la différence. Gratuit – votre IP n’est pas stockée.
- Comparer deux JSONComparer JSON : trouvez les différences entre deux documents JSON avec chemin, ancienne et nouvelle valeur. Ordre des clés ignoré. Dans le navigateur.
- JSON escape / unescapeJSON escape et unescape en ligne : transformez un texte en chaîne JSON valide (guillemets, barres obliques inverses et sauts de ligne échappés) ou l’inverse.
- Calculateur CSS clampCalculateur CSS clamp pour tailles de police et espacements fluides : saisissez valeur minimale, maximale et plage de viewport, copiez la valeur clamp() prête.
- Décoder un JWT : lire et vérifier un JSON Web TokenDécoder un JWT : en-tête, payload et expiration (exp, iat, nbf). Vérifiez la signature avec un secret ou une clé publique. Tout reste dans votre navigateur.
- Générateur cron : créer et expliquer une expression cronGénérateur cron et explicateur : construisez ou collez une expression, lisez-la en clair et voyez les prochaines exécutions. Unix, Spring et Quartz, en local.