Générateur CSS Border-Radius

Ajustez visuellement les coins arrondis avec aperçu en direct et code CSS à copier.

Rayons verticaux :

px
px 
{{ cssOutput }}

Qu'est-ce que border-radius ?

La propriété CSS border-radius arrondit les coins d'un élément. Vous pouvez définir un rayon uniforme pour les quatre coins ou styliser chaque coin individuellement. La notation abrégée suit l'ordre : haut-gauche, haut-droit, bas-droit, bas-gauche.

Rayons de bordure elliptiques

Avec la syntaxe étendue border-radius: H1 H2 H3 H4 / V1 V2 V3 V4, vous pouvez définir un rayon horizontal et vertical pour chaque coin. Cela crée des courbes elliptiques qui produisent des formes plus organiques.

Cas d'utilisation courants

  • Cercles : border-radius: 50% sur un élément carré.
  • Forme pilule : border-radius: 9999px pour des boutons arrondis.
  • Cartes : border-radius: 8px à 16px pour des designs de cartes modernes.
  • Formes blob : Différents rayons horizontaux et verticaux pour des formes organiques.