DevToolPal
FR

Générateur de border-radius CSS

Réglez le border-radius CSS coin par coin, avec coins elliptiques et formes organiques, en px, % ou rem, avec aperçu en direct, préréglages et le CSS le plus court à copier.

Traitement local, rien n'est envoyé

Coins

Unité

Aperçu

CSS

Préréglages
CSS du border-radius
 
 
 
 
 
Ce que fait l’outil


Le générateur de border-radius vous permet de façonner des coins arrondis visuellement et de copier le CSS le plus court. Utilisez un seul rayon pour tous les coins ou un rayon par coin, activez les coins elliptiques pour donner à chaque coin un rayon horizontal et un rayon vertical, et regardez l’aperçu évoluer pendant que vous faites glisser. L’outil fonctionne en px, %, rem ou em, et vous pouvez coller une valeur border-radius existante pour la modifier. Tout s’exécute dans votre navigateur.


Mode d’emploi


    

  1. Partez d’un préréglage ou gardez la forme d’exemple.
    2. 

  2. Choisissez l’Unité. Changer d’unité convertit les valeurs actuelles (rem et em valent 16px ; % est relatif à la boîte de l’aperçu).
    3. 

  3. Activez Même rayon pour tous les coins pour un seul curseur, ou désactivez-le pour régler Haut gauche, Haut droit, Bas droit et Bas gauche séparément.
    4. 

  4. Activez Coins elliptiques pour obtenir un curseur Horizontal et un curseur Vertical par coin.
    5. 

  5. Redimensionnez l’aperçu avec Largeur et Hauteur, puis copiez le code depuis la carte CSS. Activez la sortie détaillée si vous préférez quatre propriétés distinctes.
    6. 



Exemple


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Bon à savoir


    

  • Forme la plus courte. La sortie regroupe les valeurs identiques : quatre coins égaux donnent une seule valeur, et la partie après la barre disparaît quand tous les coins sont circulaires.
    • 

  • Les pourcentages suivent la boîte. Les pourcentages horizontaux se rapportent à la largeur de l’élément et les verticaux à sa hauteur : 50% sur un rectangle donne une ellipse, pas un cercle.
    • 

  • Les rayons qui ne tiennent pas sont réduits ensemble par le navigateur, d’où la pilule nette obtenue avec une très grande valeur en px.
    • 

  • Enfants et débordement. Les coins arrondis découpent l’arrière-plan et la bordure, mais pas le contenu enfant : ajoutez overflow: hidden pour découper les images dans la boîte.
    • 

 
  
 
FAQ
 
 
  › Que signifie la barre oblique dans border-radius ?  
Les valeurs avant la barre sont les rayons horizontaux, celles après sont les rayons verticaux. Quand elles diffèrent, le coin devient un quart d'ellipse au lieu d'un cercle. Par exemple, 50% / 30% donne une courbe plus plate que 50%.
 
  › Dans quel ordre écrit-on les quatre coins ?  
Dans le sens horaire depuis le haut à gauche : haut gauche, haut droit, bas droit, bas gauche. Avec moins de valeurs, CSS les répète : deux valeurs règlent haut gauche/bas droit et haut droit/bas gauche ; trois valeurs règlent haut gauche, haut droit/bas gauche et bas droit.
 
  › Comment faire un cercle ou une pilule ?  
border-radius: 50% transforme un carré en cercle et un rectangle en ellipse. Pour une pilule aux extrémités rondes quelle que soit la largeur, utilisez une très grande longueur comme 9999px : le navigateur réduit les rayons qui ne tiennent pas, les extrémités restent donc parfaitement rondes.
 
  › Comment créer des formes organiques (blob) ?  
Les blobs utilisent huit pourcentages différents : quatre rayons horizontaux et quatre verticaux, comme 30% 70% 70% 30% / 30% 30% 70% 70%. Choisissez un préréglage blob, activez Coins elliptiques et faites glisser les curseurs de chaque coin pour remodeler la forme.