Générateur CSS Border Radius - Outil en ligne gratuit

Fonctionnalités

Contrôle des quatre coins

Mode unifié ou indépendant

Curseur et saisie numérique

Aperçu en direct et code CSS

Comment Utiliser

1. Glissez le curseur de rayon — la carte neutre prévisualise les coins à taille réelle.

2. Passez en « Par coin » pour modeler chaque coin séparément.

3. Copiez le CSS — il utilise la forme valide la plus courte.

À propos de cet outil

Les coins arrondis tiennent en une ligne de CSS, mais trouver la bonne valeur est plus facile quand on la voit. Ce générateur prévisualise border-radius sur une carte neutre en taille réelle pendant que vous faites glisser un seul curseur ou façonnez chaque coin séparément. Il écrit ensuite la déclaration valide la plus courte : une valeur quand tous les coins sont identiques, et deux, trois ou quatre valeurs quand ils diffèrent, dans l'ordre haut gauche, haut droit, bas droit, bas gauche. De petits rayons de 4–8 px conviennent aux boutons et aux champs, 12–24 px donnent un air accueillant aux cartes, et de très grandes valeurs transforment les éléments peu hauts en pilules. Changez le fond de la scène pour voir comment la forme se lit sur des surfaces claires et sombres avant de copier le CSS dans votre feuille de style.

Questions Fréquentes

Dans quel ordre vont les quatre valeurs de border-radius ?

Dans le sens des aiguilles d'une montre à partir du coin supérieur gauche : haut gauche, haut droit, bas droit, bas gauche. Avec deux valeurs, la première s'applique au coin haut gauche et au coin bas droit, la seconde au coin haut droit et au coin bas gauche.

Comment créer un bouton en forme de pilule ou un cercle ?

Pour une pilule, utilisez un rayon au moins égal à la moitié de la hauteur de l'élément, ou simplement une très grande valeur comme 9999px. Pour un cercle, donnez à l'élément une largeur et une hauteur égales et fixez border-radius à 50%.

Pourquoi mon coin arrondi est-il coupé ou laisse-t-il voir le fond ?

Les éléments enfants peuvent déborder du coin arrondi. Ajoutez overflow: hidden au conteneur ou donnez à l'enfant un rayon identique, pour que les images et les fonds suivent la courbe.

Puis-je créer des coins elliptiques ?

Le CSS permet des rayons horizontal et vertical distincts séparés par une barre oblique, par exemple border-radius: 50% / 20%. Ce générateur se concentre sur les coins circulaires en pixels, qui couvrent l'essentiel du travail d'interface ; vous pouvez ajouter la syntaxe avec barre oblique à la main pour des formes particulières.

border-radius modifie-t-il la mise en page ou la zone cliquable ?

Non. Il ne change que la façon dont l'élément est dessiné et découpé. L'élément garde sa boîte rectangulaire dans la mise en page, et les clics dans les coins transparents sont toujours attribués à l'élément.