Générateur CSS de border-radius

Créer une forme en trois étapes

1. Définissez la largeur et la hauteur entre 1 et 2000 pixels CSS. Saisissez les rayons horizontaux et verticaux de chaque coin en px ou en %, ou appliquez le coin supérieur gauche à tous.
2. Examinez l’aperçu ajusté. Les pourcentages horizontaux utilisent la largeur et les verticaux la hauteur ; changer d’unité conserve le nombre mais modifie son sens.
3. Choisissez Rayon seul ou CSS du cadre et copiez le résultat affiché. Si la copie échoue, sélectionnez le texte en lecture seule. Une valeur invalide supprime le résultat courant.

Comprendre les deux rayons de chaque coin

Chaque coin possède un rayon horizontal et un rayon vertical. Dans border-radius, la barre oblique sépare les quatre valeurs horizontales des quatre valeurs verticales, dans l’ordre haut gauche, haut droit, bas droit, bas gauche.

Les pourcentages utilisent la largeur pour les rayons horizontaux et la hauteur pour les verticaux. Sur un rectangle, 50 % dans les deux directions produit une ellipse, pas nécessairement un cercle. Une composante nulle rend le coin carré.

Lorsque des rayons adjacents se chevauchent sur un bord, le navigateur réduit les huit composantes par un facteur commun. Les pixels résolus et utilisés décrivent ce cadre ; leurs valeurs arrondies ne remplacent pas le CSS saisi.

L’aperçu dispose le cadre aux dimensions déclarées avant de le réduire visuellement. Le rayon seul peut produire une autre forme sur un cadre de taille différente. Le CSS du cadre ajoute dimensions, dimensionnement border-box, bordure et remplissage nuls, sans les couleurs de l’aperçu.

Exemples à unités mixtes

Sur un cadre de 240 par 120, les valeurs horizontales 75 %, 120 px, 20 %, 30 px et verticales 40 px, 60 %, 60 px, 50 % donnent un facteur commun de 0,8. Les rayons horizontaux supérieurs deviennent 144 et 96 px ; les autres composantes sont également réduites.

Avec les mêmes valeurs et un cadre de 120 par 240, le facteur limitant devient 4/7. La forme utilisée change sans convertir les pourcentages en pixels fixes.

Sur un cadre de 240 par 120, des rayons de 50 % dans les deux directions valent 120 et 60 px. Des rayons tous nuls produisent des coins carrés.

Portée et interprétation

L’éditeur accepte des rayons positifs ou nuls jusqu’à 4000 px ou 1000 %, avec trois décimales au maximum. Il ne lit pas de CSS arbitraire, calc(), var(), coins logiques ou autres unités.

Utilisez un point ou une virgule décimale, sans séparateur de milliers. Un changement d’unité conserve le nombre, pas la longueur résolue. Un champ vide, incomplet ou invalide retire l’aperçu et la copie courants.

Les pixels utilisés et le facteur sont des explications arrondies pour le cadre affiché. Le rendu natif peut arrondir les sous-pixels ; le CSS copié conserve les valeurs et unités saisies.

L’ajustement ne change que l’affichage de l’aperçu, pas le cadre logique ni le CSS exporté. Sur un autre cadre, le navigateur recalcule les pourcentages et la réduction.

Le rayon façonne le fond ou la bordure, mais ne découpe pas systématiquement les éléments enfants. Cet outil ne fournit ni image importée, ni glisser-déposer, animation ou règle overflow.

Styles locaux sans brouillon enregistré

Cet outil n’ajoute ni téléversement, ni historique, ni lien ou requête contenant vos réglages. La copie est explicite. Les services existants du site, les extensions et vos propres copies ne sont pas couverts par une promesse générale d’effacement.