jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Constructeur border-radius CSS

Definissez chaque coin arrondi et générez la declaration CSS border-radius.

Chargement de l'outil...

Qu'est-ce que Constructeur border-radius CSS ?

border-radius controle le niveau d'arrondi de chaque coin d'un element, mais la raccourcie a quatre valeurs et la syntaxe elliptique a huit valeurs peuvent etre deroutantes. Cet outil rend les proprietes visuelles en vous permettant de definir chaque coin independamment et de choisir entre les unites px, rem et pourcentage, afin que vous puissiez voir l'effet avant d'ecrire la declaration CSS.

Réponse rapide

Definissez des coins arrondis sur n'importe quel element en ajustant chaque coin independamment ou en utilisant une valeur uniforme. Choisissez px, rem ou pourcentage comme unite et voyez un apercu en direct du resultat.

Last updated: 2026-06-11

Limites

  • L'outil montre des valeurs de rayon de coin uniformes et individuelles. Il ne supporte pas la syntaxe elliptique qui utilise une barre oblique pour definir des rayons horizontaux et verticaux separes par coin.
  • Les valeurs de border-radius en pourcentage sont relatives aux dimensions de l'element et peuvent produire des coins elliptiques inattendus sur des elements avec des tailles dynamiques.
  • Les coins arrondis ne masquent pas le contenu enfant par defaut. Si un element enfant a un fond ou une bordure qui depasse des coins arrondis, ajoutez overflow: hidden au parent pour appliquer le masquage a la limite arrondie.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Definissez une valeur de rayon pour chaque coin individuellement ou activez le mode uniforme pour appliquer une valeur partout.
  2. Choisissez l'unite que vous voulez utiliser : px, rem ou pourcentage.
  3. Regardez l'apercu en direct se mettre a jour pendant que vous ajustez chaque coin.
  4. Copiez la declaration CSS generee dans votre feuille de style.

A quoi il sert

  • Creer des boutons en forme de pilule en definissant border-radius plus grand que la hauteur du bouton.
  • Creer des avatars et images de profil circulaires avec border-radius: 50%.
  • Concevoir des coins de carte avec un arrondi subtil sur les coins superieurs et des coins inferieurs droits.

Cas d'usage

Exemples concrets

Exemple

Bouton pilule avec grand rayon

Un bouton d'appel a l'action necessite une forme de pilule entierement arrondie. Definir border-radius a 999px sur un bouton court cree des extremites arrondies quelle que soit la largeur du bouton.

Exemple

Carte avec arrondi de coin subtil

Une carte de contenu utilise un arrondi de 8px sur tous les coins. Le mode uniforme applique la meme valeur partout, produisant une apparence douce mais professionnelle.

Erreurs frequentes

  • Utiliser px sur des elements qui devraient s'adapter a la taille de police, empechant le rayon de coin de s'ajuster lorsque la police est redimensionnee.
  • Oublier la syntaxe avec barre oblique pour les coins elliptiques, qui definit des rayons horizontaux et verticaux separes pour les formes avancees.
  • Definir un rayon plus grand que la moitie de la taille de l'element, ce qui peut faire chevaucher les coins et produire des resultats inattendus.

Vérification

  1. Testez le border-radius genere sur l'element cible a differentes tailles et largeurs d'ecran pour confirmer que les proportions des coins restent coherentes.
  2. Inspectez l'element dans les outils de developpement pour verifier que les valeurs calculees de border-radius correspondent a la declaration.

FAQ

Questions sur Constructeur border-radius CSS

Comment faire un cercle parfait ?

Definissez border-radius a 50% sur un element carre. Cela cree un cercle parfait car chaque coin est arrondi a la moitie de la largeur et de la hauteur de l'element.

Quelle unite dois-je utiliser pour border-radius ?

Utilisez rem pour les rayons qui doivent s'adapter a la taille de police de base et px pour les elements decoratifs de taille fixe. Utilisez le pourcentage pour les formes circulaires et l'arrondi fluide.

Comment faire une forme de pilule parfaite ?

Definissez border-radius a une valeur plus grande que la hauteur de l'element, comme 999px, sur un bouton ou un badge rectangulaire. Le navigateur rend les extremites entierement arrondies quelle que soit la largeur de l'element, creant une forme de pilule.

Puis-je utiliser des valeurs en pourcentage pour border-radius ?

Oui, mais les valeurs en pourcentage se referent aux dimensions de l'element. Une valeur de 50% sur un element carre cree un cercle parfait. Sur un rectangle, 50% produit une forme elliptique car le pourcentage s'applique a la fois a la largeur et a la hauteur independamment.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi