Skip to content
Design · undefined

Generateur de border-radius

Ajustez visuellement les coins arrondis de n'importe quel element. Copiez le raccourci CSS, la forme longue, les classes Tailwind ou une propriete personnalisee — tout calcule dans votre navigateur.

In-browser only Simple / Advanced / Blob Shareable URL

200 × 200 px

Identique sur tous les cotes
Unite
Coins
Element d'apercu
Taille (px)
Bordure
Arriere-plan
border-radius: 0px;

Tout est calcule dans votre navigateur — rien n'est envoye.

Pour commencer

Comment utiliser le generateur de border-radius

  1. 1
    Choisir un mode

    Selectionnez Simple pour un arrondi egal, Avance pour un controle elliptique par coin, ou Blob pour des formes organiques libres en pourcentage.

  2. 2
    Ajuster les curseurs de coin

    Glissez un curseur ou tapez une valeur directement dans le champ numerique. En mode Simple, activez "Identique sur tous les cotes" pour lier les quatre coins a une seule valeur.

  3. 3
    Apercu en temps reel

    L'element se met a jour instantanement. Redimensionnez-le avec les champs Taille, et stylez sa bordure et son arriere-plan dans le panneau de controles.

  4. 4
    Choisir un preset

    Utilisez les boutons Element d'apercu pour passer aux valeurs par defaut pour un Bouton, une Carte, un Avatar, une Image ou un Champ — puis affinez.

  5. 5
    Selectionner le format de sortie

    Choisissez Raccourci, Forme longue, Tailwind ou Propriete perso. Le bloc de code se met a jour immediatement.

  6. 6
    Copier et partager

    Cliquez sur Copier CSS pour placer le code genere dans votre presse-papiers. Cliquez sur Partager pour copier une URL avec tous vos reglages actuels.

Reference CSS

Regles du raccourci CSS

Regles du raccourci CSS
ValeursSignificationExemple
1 valeurLes quatre coins sont egauxborder-radius: 8px
2 valeursHG+BD d'abord, HD+BG ensuiteborder-radius: 8px 4px
3 valeursHG, HD+BG, BDborder-radius: 8px 4px 12px
4 valeursHG, HD, BD, BG (sens horaire)border-radius: 8px 4px 12px 2px

Questions frequentes

Qu'est-ce que border-radius en CSS ?
La propriete CSS border-radius arrondit les coins d'un element. Vous pouvez definir une seule valeur pour arrondir les quatre coins egalement, ou des valeurs individuelles par coin pour des formes asymetriques. Les valeurs en pourcentage creent des courbes elliptiques qui s'adaptent aux dimensions de l'element.
Quelle difference entre les modes Simple, Avance et Blob ?
Simple permet de definir un rayon par coin (optionnellement lie). Avance donne a chaque coin un rayon horizontal et vertical independant, produisant des arcs elliptiques. Blob genere des formes organiques libres avec des valeurs en pourcentage, et un bouton Aleatoire pour explorer rapidement.
Comment fonctionne la sortie Tailwind ?
Les valeurs correspondant a l'echelle Tailwind v3/v4 (0, 2, 4, 6, 8, 12, 16, 24, 9999 px) sont converties en classes nommees comme rounded-lg. Les autres valeurs utilisent la syntaxe arbitraire : rounded-[5px]. Le mode Avance (elliptique) ne peut pas etre represente par les utilitaires Tailwind, donc le raccourci CSS est affiche.
Puis-je partager mes reglages avec quelqu'un ?
Oui. Cliquez sur Partager et l'URL complete — avec tous vos reglages actuels — est copiee dans le presse-papiers. Quiconque ouvre cette URL verra la meme configuration.
A quoi sert le curseur Fluidite en mode Blob ?
La fluidite ajoute une vague cosmetique subtile a l'apercu uniquement — elle rend la forme plus organique. Elle n'affecte pas le CSS genere, qui utilise toujours les valeurs brutes en pourcentage.
Que se passe-t-il quand les rayons de coin se chevauchent ?
Si la somme de deux rayons adjacents depasse la longueur du bord de l'element, le navigateur reduit automatiquement tous les rayons proportionnellement. L'outil affiche un avertissement lorsque cette condition est detectee.