Générateur border-radius CSS — Créer des Coins Arrondis et Formes

La propriété CSS border-radius va bien au-delà des simples coins arrondis — avec la syntaxe à 8 valeurs, vous pouvez créer des formes organiques, des blobs, des feuilles et des squircles. Notre générateur visuel vous permet d'expérimenter librement et génère le code CSS correspondant.

La syntaxe complète de border-radius

border-radius accepte jusqu'à 8 valeurs : 4 rayons horizontaux et 4 rayons verticaux, séparés par /. Par exemple : border-radius: 40% 60% 70% 30% / 40% 40% 60% 50% crée une forme organique. Notre générateur rend cette syntaxe accessible visuellement.

Comment utiliser notre Générateur

1. Faites glisser les 8 poignées (rayon horizontal et vertical de chaque coin) pour ajuster la forme.
2. Utilisez les préréglages : carré arrondi, cercle, ellipse, squircle, formes organiques.
3. Ajustez les dimensions (largeur/hauteur) pour voir le rendu dans la proportion cible.
4. Copiez le code border-radius en une ligne ou en forme étendue.

Effets créatifs avec border-radius

• Squircle : La forme d'icône iOS — ni carré ni cercle, avec un arrondi continu.
• Feuille : Arrondi sur deux coins diagonaux, anguleux sur les deux autres.
• Bulle de dialogue : Combiné avec des pseudo-éléments pour la pointe.
• Formes organiques : Utilisez les 8 valeurs indépendantes pour des formes asymétriques uniques.

Prêt à l'essayer ? Utilisez notre Générateur border-radius CSS gratuitement — sans inscription, fonctionne dans votre navigateur.

Questions fréquentes

Comment créer un cercle parfait avec border-radius ?

Utilisez border-radius: 50% sur un élément carré (largeur = hauteur). Pour les éléments non carrés, utilisez 50% — l'élément deviendra une ellipse.

Qu'est-ce qu'un squircle et comment le créer en CSS ?

Un squircle (square + circle) est la forme d'icône Apple. En CSS pur : border-radius: 30% est une approximation. Pour un squircle parfait, utilisez un clip-path SVG avec une courbe superellipse.

border-radius affecte-t-il les performances CSS ?

L'arrondi simple a un impact minimal. Les arrondis complexes sur des éléments avec des ombres, des dégradés ou des animations peuvent ralentir le rendu sur les appareils moins puissants.