Border Radius & Blob Generator

Create simple rounded corners or organic blob shapes with live preview. Generate production-ready CSS code instantly.

Controls

Link Corners
px
px
px
px

Live Preview

Generated Code

border-radius: 16px;
rounded-[16px]

Pro Tip: Simple Mode

Use 'Link Corners' to adjust all corners at once. The tool automatically outputs the shortest valid CSS syntax.

Related Tools

Explore these related free tools to enhance your productivity and workflow.

Design & UI Tools

Browse all design and UI tools including gradients, shadows, and border radius generators

CSS Gradient Generator

Create beautiful CSS gradients with custom colors and angles

Box Shadow Generator

Generate CSS box shadows with custom offsets, blur, and spread

Frequently Asked Questions

What's the difference between Simple and Fancy mode?

Simple mode creates standard CSS border-radius with uniform or individual corner values using any unit (px, %, rem, em). Fancy mode uses dual-axis border-radius syntax with percentages to create organic blob shapes with separate horizontal and vertical radii for each corner.

How do I create unique blob shapes?

Switch to Fancy mode and use the Randomize button to generate unique shapes, or start with a preset and adjust the 8 sliders (4 for horizontal, 4 for vertical radii). Each slider controls how much the corner curves in that direction.

Why does Fancy mode only use percentages?

The dual-axis border-radius syntax (with the / separator) works most reliably with percentage values. This ensures the blob shape scales proportionally with the element size and produces consistent, smooth curves.

What is dual-axis border-radius?

Dual-axis border-radius uses the syntax: border-radius: TLx TRx BRx BLx / TLy TRy BRy BLy. The values before / control horizontal curvature, and values after / control vertical curvature, enabling organic blob-like shapes.

Can I use this with Tailwind CSS?

Yes! Click the 'Tailwind' button to copy the arbitrary value syntax that works directly in Tailwind CSS classes, like rounded-[30%_70%_70%_30%/30%_30%_70%_70%].