Fancy Border Radius Generator

Create organic, blob-like shapes using 8-point CSS border-radius. Preview and copy CSS code instantly.

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

Horizontal Radius

Top Left30%
Top Right70%
Bottom Right70%
Bottom Left30%

Vertical Radius

Top Left30%
Top Right30%
Bottom Right70%
Bottom Left70%

Fancy Border Radius Generator | Create Organic CSS Shapes

Transform standard rectangles into fluid, organic "blobs" using 8-point CSS values.

💡 Why use this?

Standard rounded corners often feel rigid. This generator unlocks the full power of the CSS border-radius property, allowing you to create asymmetric, liquid-like shapes that add personality to your UI.

Whether you need a unique background element or an eye-catching button, this tool generates production-ready code instantly—eliminating the need for heavy SVG assets.

🚀 Get Started

  • Control every curve: Use the 8 sliders to adjust horizontal and vertical radii independently for sophisticated asymmetry.
  • Randomize for inspiration: Hit "Random Blob" to instantly discover trendy shapes.
  • Copy & Paste: Grab the standard CSS syntax and drop it directly into your stylesheet.
  • Layer for depth: These shapes pair perfectly with gradients, soft shadows, and glassmorphism effects.

🧐 FAQ

Q. What does the "/" in the code mean? The slash separates horizontal radius values from vertical ones. This syntax enables elliptical corners, which is the secret to creating organic "blob" shapes instead of simple circles.

Q. Is this browser-compatible? Yes. This syntax is fully supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.

Q. Can I use this in production? Absolutely. Pure CSS is lightweight, scalable, and significantly more performant than using image-based shapes or complex SVGs.

🛠️ How it Works

The "8-point border-radius" allows you to define two values for each of the four corners. By controlling both the horizontal and vertical axes, you gain total command over the curvature. Using CSS for these shapes keeps your DOM light and ensures your site stays fast.