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

The slash syntax `border-radius: H1 H2 H3 H4 / V1 V2 V3 V4` defines the horizontal radii for the four corners before the slash, followed by the vertical radii after the slash.

Can I animate these organic blobs using CSS transitions?

Yes! Because border-radius is a fully animatable CSS property, you can smoothly transition between two 8-value border radii in keyframe animations.

How do I use this generated blob in Tailwind CSS?

You can use Tailwind’s arbitrary value syntax: `rounded-[60%_40%_30%_70%/60%_30%_70%_40%]`, or configure a custom key inside `tailwind.config.js`.

Are 8-value border-radius rules supported in all browsers?

Yes. The 8-value border-radius specification is universally supported across all modern browsers including Chrome, Safari, Firefox, Edge, and iOS/Android mobile browsers.

Does this tool require external design packages?

No. The generator runs entirely within your browser utilizing standard CSS stylesheet properties.

CSS Border Radius & Blob Generator

Visual 8-point CSS border radius and organic blob generator with copyable CSS and Tailwind classes.

100% free
Private in browser
No signup
No watermarks

Blob & Shape Presets:

Organic Shape

Horizontal Axes (Top-Left, Top-Right, Bottom-Right, Bottom-Left)

Top-Left Horizontal:60%

Top-Right Horizontal:40%

Bottom-Right Horizontal:30%

Bottom-Left Horizontal:70%

Vertical Axes (Top-Left, Top-Right, Bottom-Right, Bottom-Left)

Top-Left Vertical:60%

Top-Right Vertical:30%

Bottom-Right Vertical:70%

Bottom-Left Vertical:40%

CSS Rule

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

Tailwind CSS Class

rounded-[60%_40%_30%_70%/60%_30%_70%_40%]

Rate this tool

Be the first to rate — helps others and improves this page.

About CSS Border Radius & Blob Generator

The CSS Border Radius & Blob Generator takes full advantage of the CSS3 8-value border-radius specification. By adjusting individual horizontal and vertical radii for all four corners independently, you can craft fluid organic blobs, squircle icons, modern card shapes, and aesthetic UI elements with instant copy-to-clipboard code.

How to use CSS Border Radius & Blob Generator

Adjust Corner Sliders: Drag the horizontal and vertical percentage handles for the top-left, top-right, bottom-right, and bottom-left corners.
Test Shape Presets: Click quick preset badges like Organic Blob, Pill, Egg, or Leaf to jumpstart your design.
Copy CSS or Tailwind: Click Copy CSS or Copy Tailwind to immediately paste the styling into your web project.

Key features

Full 8-Point Radius Control: Independently control horizontal and vertical corner radii for maximum fluid organic shapes.
Curated Shape Presets: Instant one-click access to organic blobs, eggs, squircles, leaves, and pill shapes.
Tailwind CSS Compatibility: Exports both standard CSS rules and Tailwind CSS arbitrary value classes.
Live Responsive Canvas: Visual interactive preview with custom gradients and real-time dimension scaling.

Frequently asked questions

How does the 8-value CSS border-radius syntax work?: The slash syntax `border-radius: H1 H2 H3 H4 / V1 V2 V3 V4` defines the horizontal radii for the four corners before the slash, followed by the vertical radii after the slash.
Can I animate these organic blobs using CSS transitions?: Yes! Because border-radius is a fully animatable CSS property, you can smoothly transition between two 8-value border radii in keyframe animations.
How do I use this generated blob in Tailwind CSS?: You can use Tailwind’s arbitrary value syntax: `rounded-[60%_40%_30%_70%/60%_30%_70%_40%]`, or configure a custom key inside `tailwind.config.js`.
Are 8-value border-radius rules supported in all browsers?: Yes. The 8-value border-radius specification is universally supported across all modern browsers including Chrome, Safari, Firefox, Edge, and iOS/Android mobile browsers.
Does this tool require external design packages?: No. The generator runs entirely within your browser utilizing standard CSS stylesheet properties.