Générateur de border-radius CSS
Réglez 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.
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 :
| 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.
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.
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 :
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.
- Vérifier et calculer une clé de LuhnVérifiez un numéro avec l’algorithme de Luhn (modulo 10, ISO/IEC 7812-1) ou calculez sa clé – simple contrôle de format, en local dans le navigateur.
- Associer des polices – duos pour titres et texte courantDuos de polices pour titres et texte courant avec aperçu en direct, CSS à copier et disponibilité sur Windows, Mac, iPhone et Android – sans police web.
- Calculer le ratio d’une image (rapport largeur/hauteur)Calculez le ratio largeur/hauteur (1920 × 1080 = 16:9), trouvez le côté manquant, la valeur décimale, le format standard le plus proche et le CSS aspect-ratio.