Aller au contenu
EN

Générateur de border-radius

Réglez les coins arrondis en CSS : chaque coin séparément, en px ou en %, formes organiques (blobs), pilule, goutte, feuille. Code CSS et Tailwind.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Réglez le border-radius de vos éléments coin par coin, en pixels ou en pourcentages, avec des formes toutes prêtes (carte, pilule, cercle, goutte, feuille, onglet, bulle) et des formes organiques (blobs) à rayons horizontaux et verticaux séparés, ou tirées au hasard. Le code CSS est raccourci automatiquement.

Dans quels cas l'utiliser ?

Boutons et cartes

Un arrondi de 8 à 16 px adoucit une interface ; une pilule (999px) est la forme classique des boutons et des étiquettes.

Images décoratives

Une forme de blob ou de goutte appliquée à une photo donne un style organique et moderne à une page d'accueil.

Bulles de discussion et onglets

Arrondir trois coins et laisser le quatrième droit dessine une bulle de chat ; arrondir le haut seulement dessine un onglet.

Mode d'emploi

  1. Choisissez une forme toute prête ou réglez les quatre coins.
  2. Activez la forme organique pour des blobs.
  3. Copiez le code border-radius.

Comment ça marche

Les quatre coins suivent l'ordre CSS (dans le sens des aiguilles d'une montre depuis le haut à gauche). En mode organique, une deuxième série de valeurs donne les rayons verticaux, après la barre oblique.

Le code est raccourci selon les règles CSS : une seule valeur si les quatre sont égales, deux si les coins opposés sont égaux, trois si seuls les coins droite et gauche du haut et du bas diffèrent.

Conseils pour un bon résultat

  • Gardez le même arrondi pour tous les éléments d'une même famille (cartes, boutons…).
  • Un élément intérieur doit avoir un arrondi plus petit que son parent, diminué de l'espacement.
  • Les pourcentages s'adaptent à la taille de l'élément ; les pixels restent constants.
  • Les blobs fonctionnent mieux sur des éléments presque carrés.

Problèmes fréquents et solutions

Mon cercle est ovale

L'élément n'est pas carré : donnez-lui la même largeur et la même hauteur, ou utilisez aspect-ratio: 1.

L'image dépasse des coins arrondis

Ajoutez overflow: hidden au conteneur, ou appliquez border-radius directement à l'image.

La pilule n'est pas ronde aux bouts

Avec un pourcentage, le rayon dépend de la largeur. Utilisez une grande valeur en pixels (999px).

Questions fréquentes

Comment arrondir un seul coin ?

Décochez « Coins liés » et réglez le coin voulu : le code s'écrit avec quatre valeurs, dans l'ordre haut-gauche, haut-droite, bas-droite, bas-gauche.

Comment faire un cercle ?

border-radius: 50% sur un élément carré. Sur un rectangle, 50 % donne une ellipse ; pour une pilule, utilisez une grande valeur en px (999px).

Qu'est-ce qu'une forme organique ?

Chaque coin peut avoir un rayon horizontal et un rayon vertical différents, notés avec une barre oblique : 30% 70% 70% 30% / 30% 30% 70% 70%. On obtient des formes de galet ou de goutte.

Le code est-il raccourci ?

Oui : quatre valeurs identiques deviennent une seule, et les paires symétriques sont regroupées, comme le ferait un développeur.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.