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 — Blob Creator & CSS Snippets

Fancy Border Radius — Blob Creator & CSS Snippets Overview

Create unique blob shapes with 8-point border-radius values.

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 — Blob Creator & CSS Snippets

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