How does the CSS 8-value border-radius slash syntax work?

The 8-value syntax separates the four horizontal corner radii from the four vertical corner radii using a forward slash (e.g., border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%). This defines elliptical corner curvatures that produce organic, non-circular blob shapes.

What is a squircle and how is it created with border-radius?

A squircle is a geometric hybrid between a square and a circle with smooth curvature transitions. Setting balanced percentage radii across corners produces Apple-style squircle icons and cards.

Is an 8-point border-radius blob supported across all web browsers?

Yes. The 8-value border-radius slash syntax has been fully supported across all modern web browsers (Chrome, Safari, Firefox, Edge, and mobile browsers) for over a decade.

Does this shape generator require external CSS libraries or frameworks?

No. The generated code is standard pure CSS compatible with any frontend framework, Tailwind CSS, or vanilla stylesheet.

Design & Visual

CSS Border Radius Generator

Create organic 8-value blob shapes, squircles, and smooth corner radius styles with live interactive preview and morphing animation.

🔒 Pure Modern CSS3: Produces zero-runtime CSS properties fully compatible with Chrome, Safari, Edge, and Firefox.

Shape Presets:

Live Shape

Theme:

Horizontal Radii (X-Axis)

Top-Left (X)60%

Top-Right (X)40%

Bottom-Right (X)30%

Bottom-Left (X)70%

Vertical Radii (Y-Axis)

Top-Left (Y)40%

Top-Right (Y)60%

Bottom-Right (Y)70%

Bottom-Left (Y)30%

Generated CSS Code

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

100% Private. Your data never leaves your device.

FreeToolsBox • Instant & Free

What is CSS Border Radius Generator?

Modern CSS border-radius syntax supports independent horizontal and vertical radii per corner, enabling organic blob shapes and smooth squircles without SVG clipping paths. Our CSS Border Radius Generator provides visual drag handles to sculpt custom 8-point organic shapes, pill badges, and asymmetrical card borders with instant CSS code generation.

Designed for accuracy, speed, and privacy, this tool runs entirely on your local device with zero network latency.

How to Use the CSS Border Radius Generator

1
Toggle between "Standard 4-Corner Mode" and "Advanced 8-Point Blob Mode".
2
Drag the interactive corner and edge handles to adjust horizontal and vertical radius percentages.
3
Optionally enable the "Smooth Animation" preview to observe dynamic organic morphing transitions.
4
Click the "Copy CSS" button to paste the exact border-radius declaration into your stylesheet.

Formula & Calculation Logic

Defines the horizontal radii before the forward slash and vertical radii after the forward slash for top-left, top-right, bottom-right, and bottom-left corners per W3C CSS Backgrounds specification.

CSS 8-Value Slash Syntax: border-radius: [tlX]% [trX]% [brX]% [blX]% / [tlY]% [trY]% [brY]% [blY]%

CSS Border Radius Generator Frequently Asked Questions

Related Design & Freelance

Explore more free tools in this category

View all in Design & Freelance

Popular

CSS Gradient Generator

Design linear, radial, and conic CSS gradients with multiple color stops, angle presets, and copy-ready CSS code.

Design & FreelanceOpen Tool →

Popular

CSS Box Shadow Generator

Build smooth, realistic, multi-layered CSS box shadows with interactive blur, spread, offset, and inset controls.

Design & FreelanceOpen Tool →

Color Palette Generator

Generate harmonic color palettes (monochromatic, complementary, triadic, analogous) with one click.

Design & FreelanceOpen Tool →

Font Pairing Suggester

Browse curated Google Font pairings for headings and body typography with live interactive layout previews.

Design & FreelanceOpen Tool →