CSS Border Radius : Formes, blobs et coins créatifs

Explorez border-radius des simples coins arrondis aux formes blob complexes avec la syntaxe complète à 8 valeurs.

5 min de lecture CSS · Design · UI 6 sections + FAQ

CSS border-radius est bien plus puissant que la plupart des développeurs ne le réalisent. Au-delà des simples coins arrondis se trouve une syntaxe complète à 8 valeurs pour des formes organiques.

Chaque coin peut avoir des rayons horizontaux et verticaux indépendants, permettant des formes fluides et organiques.

Syntaxe border-radius (1-4 valeurs)

border-radius accepte 1 à 4 valeurs en utilisant le raccourci CSS standard. Une valeur : les quatre coins égaux. Deux valeurs : premier pour haut-gauche et bas-droite.

Outil gratuit Générateur de border-radius Créez des formes personnalisées et des bordures blob avec sortie CSS en direct

Raccourci et propriétés individuelles

Le raccourci border-radius définit tous les coins à la fois. Les propriétés individuelles définissent des coins spécifiques : border-top-left-radius, etc.

Syntaxe à 8 valeurs pour formes asymétriques

La syntaxe à 8 valeurs utilise une barre oblique pour séparer les rayons horizontaux et verticaux : border-radius: Ah Bh Ch Dh / Av Bv Cv Dv.

Outil gratuit Générateur de box-shadow Créez des ombres box CSS en couches avec aperçu en direct

Créer des cercles et pilules

Pour un cercle : définissez border-radius: 50% sur un élément carré. Pour une pilule : définissez border-radius: 9999px sur un élément rectangulaire.

Technique des formes blob

Les formes blob utilisent la syntaxe à 8 valeurs avec des valeurs asymétriques : border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.

Modèles de design UI

Modèles border-radius courants : 4-8px pour des coins de carte subtils, 12-16px pour des cartes proéminentes, 50% pour des cercles d'avatar, 9999px pour les chips.

Outil gratuit Générateur de glassmorphisme Créez des effets UI verre dépoli avec CSS backdrop-filter

Questions fréquentes

Quelle est la différence entre border-radius: 50% et 100% ? +
Pour les éléments carrés, les deux produisent un cercle. Les valeurs supérieures à 50% sont traitées comme 50% par les navigateurs.
Puis-je utiliser border-radius avec des valeurs en pourcentage ? +
Oui. Les valeurs en pourcentage sont relatives aux dimensions de l'élément.
Qu'est-ce que la barre oblique dans la syntaxe border-radius ? +
La barre oblique sépare les rayons horizontaux (avant) des rayons verticaux (après).
Comment créer une forme blob en CSS ? +
Utilisez la syntaxe à 8 valeurs : border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
border-radius affecte-t-il les éléments enfants ? +
border-radius découpe les éléments enfants si overflow: hidden est défini sur le parent.
Puis-je animer border-radius ? +
Oui, border-radius est entièrement animable avec CSS transition et animation.
Quelle valeur border-radius crée une forme pilule ? +
border-radius: 9999px crée une forme pilule sur n'importe quel élément rectangulaire.