Générateur de Border Radius

Arrondissez chaque coin avec des curseurs, façonnez des formes organiques « blob » avec le mode elliptique, et copiez le CSS aussitôt.

Préréglages
Coins
Tous les coins
24px
CSS
Ajustez les curseurs pour arrondir vos coins.

Chaque forme est dessinée dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.

FAQ

Comment fonctionnent les quatre coins et px par rapport à % ?

Les quatre curseurs correspondent, dans le sens horaire, aux coins haut-gauche, haut-droit, bas-droit et bas-gauche. En pixels, le coin s’arrondit d’une valeur fixe ; en pourcentage, il s’arrondit selon la boîte : le pourcentage horizontal suit la largeur et le vertical suit la hauteur, si bien qu’à 50 % un carré devient un cercle.

À quoi sert le mode elliptique ?

Désactivé, chaque coin est un quart de cercle avec un seul rayon. Activez-le et chaque coin reçoit un rayon horizontal et un rayon vertical distincts : c’est ainsi que l’on crée les formes « blob » douces et organiques. L’outil écrit pour vous la forme à deux groupes séparés par une barre oblique, et revient à la forme courte quand les coins redeviennent ronds.

Comment faire un cercle parfait ou une pilule ?

Liez les coins, passez en pourcentage et réglez 50 % : un carré devient un cercle. Pour un bouton en forme de pilule, restez en pixels et tirez un coin au-delà de la moitié de la hauteur du bouton ; les côtés restent entièrement arrondis quelle que soit la largeur. Le préréglage Cercle prépare le premier cas en un clic.