CSS `border-radius` allows specifying separate horizontal and vertical radii for each corner using the slash `/` syntax.

Is this compatible with older browsers?

Yes, advanced border-radius syntax is supported in all modern browsers and IE9+.

Yes, `border-radius` is a remarkably performant property to animate with CSS transitions.

Fancy Border Radius

Fancy Border Radius Overview

Generate advanced CSS border-radius shapes

Create organic, non-standard shapes using the full power of CSS border-radius. Manipulate all 8 values (horizontal and vertical radii for each corner) visually to create "blobby" squares and circles purely with CSS.

How to Use Fancy Border Radius

Drag the control handles on the preview box
Adjust shapes for each of the 4 corners
Preview with different backgrounds
Copy the complex `border-radius` CSS code

Frequently Asked Questions

How does this work?: CSS `border-radius` allows specifying separate horizontal and vertical radii for each corner using the slash `/` syntax.
Is this compatible with older browsers?: Yes, advanced border-radius syntax is supported in all modern browsers and IE9+.
Can I animate this?: Yes, `border-radius` is a remarkably performant property to animate with CSS transitions.

Related Design Tools

Color Contrast Checker - Check WCAG accessibility contrast
SVG Pattern Generator - Create seamless background patterns
Flexbox Generator - Visual CSS Flexbox builder
SVG Blob Generator - Create extensive unique SVG blobs
CSS Filter Generator - Visual editor for CSS image filters
CSS Transform Generator - 2D/3D CSS Transform builder
CSS Keyframe Gen - Create CSS animations visually
Cubic Bezier Generator - Visual cubic-bezier easing generator