Générateur CSS border-radius : des coins arrondis sans tâtonnement

border-radius fait partie de ces propriétés CSS que l'on croit maîtriser après cinq minutes, puis qu'on redécouvre des mois plus tard avec l'impression de ne jamais avoir vraiment compris. Un border-radius: 8px pour arrondir les coins, c'est la partie évidente. Mais la même propriété peut créer des cercles parfaits, des ellipses, des formes blob organiques et même des animations morphing spectaculaires.

Ce guide couvre tout ce que vous devez savoir sur border-radius, des bases aux techniques avancées, avec des exemples concrets pour chaque cas d'usage. Et pour les combinaisons complexes, le générateur CSS border-radius vous évitera de passer des heures à tâtonner.

Comprendre border-radius

border-radius permet d'arrondir les coins d'un élément HTML. Sous le capot, il définit un rayon horizontal et un rayon vertical pour chacun des quatre coins — jusqu'à huit valeurs au total.

La syntaxe de base :

/* Tous les coins identiques */
.element {
  border-radius: 8px;
}

/* Deux valeurs : haut-bas et gauche-droite */
.element {
  border-radius: 8px 16px;
}

/* Quatre valeurs : haut-gauche, haut-droite, bas-droite, bas-gauche */
.element {
  border-radius: 8px 16px 24px 4px;
}

/* Propriétés individuelles */
.element {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 4px;
}

L'ordre des quatre valeurs suit le sens des aiguilles d'une montre en partant du coin haut-gauche — comme pour margin et padding.

px ou % : une différence fondamentale

Quand utiliser px

Les pixels conviennent aux éléments de taille fixe car la valeur reste constante :

.btn    { border-radius: 6px; }
.card   { border-radius: 12px; }
.badge  { border-radius: 4px; }
.input  { border-radius: 6px; }

L'avantage des pixels : intuitivité. Un border-radius: 8px sur un petit bouton et sur un grand conteneur donnera visuellement des résultats différents, ce qui est souvent ce que l'on souhaite.

Quand utiliser %

Les pourcentages sont relatifs aux dimensions de l'élément — les rayons horizontaux par rapport à la largeur, les verticaux par rapport à la hauteur.

/* Cercle parfait (largeur = hauteur) */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Ellipse (largeur différente de hauteur) */
.ellipse {
  width: 200px;
  height: 80px;
  border-radius: 50%;
}

Un carré avec border-radius: 50% devient un cercle. Un rectangle avec border-radius: 50% devient une ellipse. C'est mathématiquement logique : les rayons sont calculés proportionnellement à chaque dimension.

Cas d'usage courants

Boutons : la rondeur comme signal visuel

Le border-radius d'un bouton communique une intention de design :

/* Aucun arrondi : sérieux, institutionnel */
.btn-square { border-radius: 0; }

/* Légèrement arrondi : moderne, professionnel */
.btn-subtle { border-radius: 4px; }

/* Bien arrondi : dynamique, accessible */
.btn-rounded { border-radius: 8px; }

/* Forme pilule : tendance, call-to-action */
.btn-pill { border-radius: 9999px; }

Pourquoi 9999px plutôt que 50% pour les boutons pilule ? Sur un bouton large, 50% génère des ellipses aux extrémités au lieu de la forme capsule souhaitée. Une valeur de pixels suffisamment grande assure toujours une forme pilule propre, quel que soit le ratio largeur/hauteur.

Cartes et conteneurs

.card {
  border-radius: 16px;
  overflow: hidden; /* Indispensable pour ne pas que les images débordent */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

Le overflow: hidden est souvent oublié. Sans lui, l'élément affiche des coins arrondis, mais les images internes restent rectangulaires et dépassent visuellement des coins — un classique.

Coins partiellement arrondis

Pour des composants UI spécifiques comme des onglets ou des menus déroulants :

/* Onglet : arrondi seulement en haut */
.tab {
  border-radius: 8px 8px 0 0;
}

/* Menu déroulant : arrondi seulement en bas */
.dropdown {
  border-radius: 0 0 8px 8px;
}

/* Infobulle pointant vers le bas-gauche */
.tooltip {
  border-radius: 8px 8px 8px 0;
}

/* Carte avec coin accentué */
.card-accent {
  border-radius: 0 16px 16px 16px;
}

Avatars et icônes circulaires

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}

.notification-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

Formes organiques : la syntaxe slash

C'est là que border-radius révèle toute sa puissance. La syntaxe slash permet de définir des rayons horizontaux et verticaux distincts pour chaque coin :

/* Syntaxe : rayons_horizontaux / rayons_verticaux */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Avant le slash : les rayons horizontaux des quatre coins (haut-gauche, haut-droite, bas-droite, bas-gauche). Après le slash : les rayons verticaux dans le même ordre.

Cette syntaxe génère des formes asymétriques et organiques — les fameux "blobs" omniprésents dans le web design contemporain :

/* Quelques blobs sympas */
.blob-a { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.blob-b { border-radius: 50% 50% 30% 70% / 40% 60% 50% 50%; }
.blob-c { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; }

Trouver les huit valeurs idéales à la main est épuisant. Le générateur CSS border-radius règle ce problème : déplacez les curseurs, voyez le résultat en temps réel, copiez le code CSS généré.

Animations avec border-radius

border-radius est pleinement animable — les valeurs s'interpolent fluidement entre deux états.

Transition au survol

.btn {
  border-radius: 4px;
  transition: border-radius 0.25s ease;
  background: #6366f1;
  color: white;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
}

.btn:hover {
  border-radius: 20px;
}

Un effet subtil mais efficace qui rend les boutons plus vivants sans être intrusif.

Animation blob morphing

@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
  }
  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 40%;
  }
}

.hero-blob {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  animation: blobMorph 10s ease-in-out infinite;
}

Cet effet de blob animé en arrière-plan est très tendance sur les landing pages modernes.

Transformation carré en cercle

.shape {
  width: 100px;
  height: 100px;
  background: #f59e0b;
  border-radius: 8px;
  transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.shape:hover {
  border-radius: 50%;
}

La courbe de Bézier avec un overshooting crée un effet de rebond lors de la transformation.

border-radius dans un système de design

Pour les projets importants, centralisez les valeurs dans des variables CSS :

:root {
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* Utilisation cohérente dans les composants */
button  { border-radius: var(--radius-sm); }
.card   { border-radius: var(--radius-xl); }
.avatar { border-radius: var(--radius-full); }
input   { border-radius: var(--radius-md); }
.tag    { border-radius: var(--radius-full); }

Changer le look global de l'application revient alors à modifier quelques valeurs de variables — tous les composants s'adaptent automatiquement.

Tailwind CSS implémente cette philosophie avec ses classes rounded-sm, rounded-lg, rounded-full, etc. Si vous utilisez Tailwind, ces classes sont disponibles dès l'installation.

Compatibilité navigateurs

border-radius est supporté par tous les navigateurs modernes sans exception. La syntaxe slash est également disponible depuis de nombreuses années. Aucune préoccupation de compatibilité pour les projets actuels.

Pourquoi utiliser un générateur ?

Pour les valeurs simples (border-radius: 8px), écrire manuellement est rapide. Mais pour la syntaxe slash avec huit valeurs, les combinaisons possibles sont quasi infinies. Trouver la forme organique que vous avez en tête par essais et erreurs peut prendre des heures.

Le générateur CSS border-radius résout ce problème :

Curseurs interactifs pour chacune des huit valeurs
Prévisualisation en temps réel de la forme
Code CSS prêt à l'emploi en un clic
Préréglages pour les cas courants (cercle, pilule, blob)

Idéal pour le prototypage rapide et pour les ajustements lors des revues de design.

Récapitulatif

border-radius va bien au-delà de simples coins arrondis :

4-8px : boutons, champs de formulaire, badges
12-16px : cartes, modales, panneaux
9999px : boutons pilule, tags
50% : avatars circulaires, icônes rondes
Syntaxe slash + % : formes blob organiques
Combiné avec transition/animation : effets morphing fluides

Ouvrez le générateur CSS border-radius, jouez avec les curseurs, et vous découvrirez rapidement à quel point cette propriété est expressive quand on l'exploite pleinement.