CSSbeginner

CSS Border Radius Generator

create complex CSS border-radius shapes with per-corner controls

By Bikram NathLast updated May 19, 2026

Generates CSS border-radius declarations for any shape, from uniform pill buttons to asymmetric blob forms used in hero sections. Adjust each corner's horizontal and vertical radius independently, and the tool computes shorthand like `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` while rendering the live shape, eliminating the trial-and-error loop you would otherwise run in browser DevTools.

Try it now — free, instant, no signup

What is CSS Border Radius Generator?

CSS Border Radius Generator lets you set all eight radius values, four corners each with a horizontal and vertical component, through visual handles and shows the resulting shape instantly. The underlying property accepts up to eight values separated by a slash, where values before the slash control horizontal radii and values after control vertical radii. Drag any handle to an extreme and you can form oval-like blobs without writing a single character by hand.

When you need a simple uniform corner, DevTools number-scrubbing is faster. But the moment you want asymmetric corners, the kind used for organic blob sections in marketing pages, the 8-value slash syntax becomes error-prone to write manually. Design tools like Figma let you round corners visually, but they export SVG paths, not `border-radius` declarations you can drop into a stylesheet and animate with CSS transitions.

One gotcha: percentage values for border-radius are relative to the element's border-box dimensions, not a single fixed length. The horizontal radius percentage is relative to the element's width, and the vertical radius percentage is relative to its height. This means `50%` on a non-square element produces an ellipse, not a circle. A circle requires equal pixel values or `50%` only when width equals height.

When to use CSS Border Radius Generator

✓Use when a design comp shows asymmetric card corners and the 8-value shorthand slash syntax is unclear from inspection.

→Reach for it when generating CSS blob backgrounds for hero sections without exporting SVG paths from Figma.

⚡Copy the output when you need a border-radius that animates between two states and want both keyframe values pre-computed.

Frequently Asked Questions

What does the `/` separator mean in the border-radius shorthand output?

The slash divides the shorthand into two groups: horizontal radii before it and vertical radii after it. For example, `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` sets four horizontal radii on the left and four independent vertical radii on the right, one per corner in top-left, top-right, bottom-right, bottom-left order. Without the slash, all eight values collapse to equal horizontal and vertical radii per corner, which limits the asymmetric shapes you can express.

Why does my blob shape look different at a different element size?

Percentage-based border-radius values scale with the element's dimensions, so the same declaration produces a visually different shape on a 200x200px box versus a 400x200px box. Horizontal radii percentages are relative to the element's width; vertical radii percentages are relative to the element's height. If you need a shape that stays consistent regardless of element size, convert the percentages to pixel values once you settle on fixed dimensions, or constrain the element's proportions using the `aspect-ratio` CSS property.

Does border-radius clip child elements automatically?

No. The rounded corners on a parent element are purely visual, and child elements can still overflow the rounded edges unless you add `overflow: hidden` to the parent. This is a common source of confusion when placing images inside rounded containers: without `overflow: hidden`, the image corners remain square even though the container appears rounded. Adding `overflow: hidden` clips children to the border-radius boundary, which is what you want for image cards and avatar frames.

Can I animate between two different blob shapes using the generated CSS?

Yes, as long as both states use the same number of values in the same syntax format. CSS transitions and `@keyframes` animations interpolate `border-radius` smoothly when both keyframe values are valid. Generate both shapes from this tool, assign them to your `from` and `to` keyframe values, and the browser tweens between them per-value. Mixing a 4-value shorthand with an 8-value slash syntax across keyframes causes the browser to skip interpolation entirely and jump abruptly instead.

Do I need `-webkit-border-radius` prefixes for the output to work?

No. The `-webkit-border-radius` prefix was required for Chrome and Safari before 2013, but both browsers have supported the unprefixed `border-radius` since Chrome 4 and Safari 5. All major browsers, including Firefox, Edge, and Safari on iOS, have supported the unprefixed property with the full 8-value slash syntax for over a decade. The only edge case is targeting very old WebKit-based embedded browsers on pre-2013 smart TV or kiosk platforms, which is unlikely in any new project.

Related Tools

CSS

CSS Box Shadow Generator

build CSS box-shadow with live preview and copy-ready code

CSS

CSS Clip Path Generator

draw CSS clip-path shapes and copy the generated code

CSS

CSS Gradient Generator

generate CSS linear, radial, and conic gradients visually

CSS

CSS Animation Generator

build CSS keyframe animations with timeline editor and preview