Générateur de border-radius

Déplacez les curseurs ou choisissez une forme prédéfinie, puis copiez le code.

Mode d’emploi

Les quatre valeurs suivent l’ordre : haut-gauche, haut-droite, bas-droite, bas-gauche.

border-radius: 40px 8px 40px 8px;

Le mode blob utilise huit pourcentages — quatre horizontaux, une barre oblique, puis quatre verticaux — pour des formes organiques.

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Utilisez 50 % sur un carré pour un cercle, ou une grande valeur comme 999px pour une pilule.

Un bouton pilule : border-radius: 999px. Un avatar rond : border-radius: 50%.

Pourquoi mon image n’est-elle pas un cercle ?

L’élément doit être carré (largeur = hauteur) avec 50 %.

px ou % ?

Le px est fixe ; le % est relatif à la taille de l’élément.

Les coins peuvent-ils différer horizontalement et verticalement ?

Oui — utilisez le mode blob avec la syntaxe à barre oblique.