What do all eight values mean?

Four horizontal radii (one per corner) and four vertical radii (also one per corner). When the horizontal and vertical radius of a corner are equal, the corner is a quarter-circle. When they differ, the corner is a quarter-ellipse - and that's what gives you organic blob shapes, leaf points, ticket stubs, and 'squircle' iOS-style icons.

A rounded-rectangle approximation that's smoother than CSS border-radius can natively produce - the iOS home-screen icon shape. The closest you can get with pure CSS is unequal horizontal and vertical radii (something like `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). True squircles need an SVG path or a CSS Houdini paint worklet - the preset here is the best-fit CSS approximation.

Why use the slash syntax?

Without the slash, all corners get circular radii (horizontal = vertical). The slash lets you set different horizontal and vertical radii per corner, which is the whole point of asymmetric shapes. Browsers all support it, and it's the only way to get a 'leaf' shape (one corner near-square, the opposite corner near-circle).

Can I use percentages instead of pixels?

Yes - percentages scale with the element's size, which is what you want for shapes that should remain proportional when the element grows. Pixels are predictable but break when the element resizes (a 40 px radius on a 30 px-wide element clips to half the width, becoming a half-circle). The generator uses percentages so the preset shapes survive resizing.

Will big radii make my buttons look strange in old browsers?

Border-radius is supported in every browser shipped since 2010. The slash syntax for asymmetric radii is supported since IE 9. The only modern gotcha is overflow: `border-radius` doesn't clip child content unless you also set `overflow: hidden` on the same element - otherwise images and absolutely-positioned children spill past the rounded corners.

Générateur de border-radius

Border-radius asymétrique avec 8 valeurs de coin, aperçu en direct et préréglages (pilule, blob, feuille, ticket).

Fonctionne dans votre navigateur

Le border-radius prend plus d'un nombre. La forme complète CSS : `border-radius: haut-gauche haut-droit bas-droit bas-gauche / haut-gauche-v haut-droit-v bas-droit-v bas-gauche-v;` - huit valeurs pour que chaque coin se courbe différemment horizontalement et verticalement. Glissez les curseurs, l'aperçu se reforme en temps réel ; les huit nombres apparaissent dessous. Les préréglages chargent les formes classiques - pilule, blob, feuille, ticket, organique - à affiner ensuite.

Préréglages

Rayons horizontaux

Haut-gauche

Haut-droit

Bas-droit

Bas-gauche

Rayons verticaux

Haut-gauche

Haut-droit

Bas-droit

Bas-gauche

CSS

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

Aperçu

Comment l'utiliser

Pick a preset or start from scratch
Pill, blob, leaf, ticket, organic, squircle - one click loads the values. Or skip presets and drag the sliders.
Tune the eight radii
Four horizontal, four vertical. Equal values per corner = a circle; unequal values = an ellipse.
Resize the preview
Toggle between square, wide-rectangle and tall-rectangle to confirm the shape holds at different aspect ratios.
Copy the CSS
The full `border-radius: a b c d / e f g h;` declaration is ready to paste.

Qu'est-ce que c'est ?

A border-radius generator builds the full CSS `border-radius` declaration with all eight possible values - four horizontal radii (one per corner) plus four vertical. The result lets you describe any combination of circular and elliptical corners in one declaration. The 'blob' and 'organic shape' aesthetic that's everywhere in 2020s web design is built from asymmetric border-radii - cheap, GPU-friendly, and scales smoothly without ever rasterising.

Quand l'utiliser

Organic 'blob' decoration shapes for landing pages, pill-shaped buttons and tags, leaf and ticket shapes for badges and coupons, asymmetric card corners (sharp top-left, rounded bottom-right) for layered designs, squircle approximations for iOS-style icons, and any place a simple `border-radius: 8px` is too plain.

Erreurs courantes

Forgetting `overflow: hidden` on the parent - child images and absolutely positioned content spill past the rounded edges. Using pixel radii on flexible-width elements - the radius doesn't scale with the element. Stacking border-radius with `clip-path` - the two interact and usually one wins; pick the right tool for the job. Animating between very different radii without a transition - the jump from rounded to sharp feels janky.

FAQ

What do all eight values mean?: Four horizontal radii (one per corner) and four vertical radii (also one per corner). When the horizontal and vertical radius of a corner are equal, the corner is a quarter-circle. When they differ, the corner is a quarter-ellipse - and that's what gives you organic blob shapes, leaf points, ticket stubs, and 'squircle' iOS-style icons.
What's a squircle?: A rounded-rectangle approximation that's smoother than CSS border-radius can natively produce - the iOS home-screen icon shape. The closest you can get with pure CSS is unequal horizontal and vertical radii (something like `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). True squircles need an SVG path or a CSS Houdini paint worklet - the preset here is the best-fit CSS approximation.
Why use the slash syntax?: Without the slash, all corners get circular radii (horizontal = vertical). The slash lets you set different horizontal and vertical radii per corner, which is the whole point of asymmetric shapes. Browsers all support it, and it's the only way to get a 'leaf' shape (one corner near-square, the opposite corner near-circle).
Can I use percentages instead of pixels?: Yes - percentages scale with the element's size, which is what you want for shapes that should remain proportional when the element grows. Pixels are predictable but break when the element resizes (a 40 px radius on a 30 px-wide element clips to half the width, becoming a half-circle). The generator uses percentages so the preset shapes survive resizing.
Will big radii make my buttons look strange in old browsers?: Border-radius is supported in every browser shipped since 2010. The slash syntax for asymmetric radii is supported since IE 9. The only modern gotcha is overflow: `border-radius` doesn't clip child content unless you also set `overflow: hidden` on the same element - otherwise images and absolutely-positioned children spill past the rounded corners.