Fancy Border Radius
Create organic, amorphous shapes using 8-point CSS border-radius and copy the exact CSS code.
Horizontal Radii
Vertical Radii
What is this tool?
The CSS Border Radius Generator is a visual styling tool for crafting modern rounded corners and organic, blob-like shapes. It provides full control over all 8 CSS border-radius values (horizontal and vertical radii for each of the four corners) with live interactive previewing and instant CSS code output.
How to generate advanced CSS border-radius shapes
- Drag the horizontal sliders at the top and bottom to adjust the corner X-radii.
- Drag the vertical sliders on the left and right to adjust the corner Y-radii.
- Observe the live shape transformation in the central visual preview window.
- Copy the generated border-radius CSS declaration to your clipboard.
Key Features
- Full support for advanced 8-value CSS border-radius syntax (x / y)
- Interactive directional sliders for top-left, top-right, bottom-right, and bottom-left corners
- Real-time responsive visual preview with high-contrast gradient canvas
- One-click copy of production-ready CSS rules
- Allows creating both symmetrical card corners and modern organic fluid shapes
Frequently Asked Questions
How does the 8-value border-radius syntax work in CSS?
The 8-value syntax separates horizontal radii from vertical radii using a forward slash: border-radius: [top-left-x] [top-right-x] [bottom-right-x] [bottom-left-x] / [top-left-y] [top-right-y] [bottom-right-y] [bottom-left-y];.
What is the difference between single and double border-radius values?
A single value creates a quarter-circle circular corner where horizontal and vertical radii are identical. Two values per corner create an elliptical corner where horizontal and vertical curvatures differ.
How do designers create organic 'blob' shapes with border-radius?
By setting percentage values that sum unevenly across horizontal and vertical axes (e.g., 30% 70% 70% 30% / 30% 30% 70% 70%), the browser curves the edges into organic, asymmetrical blobs.
Is advanced 8-value border-radius supported in all browsers?
Yes. The 8-value CSS slash syntax is part of the CSS Backgrounds and Borders Level 3 specification and is supported in all modern web browsers.
Privacy First
All border-radius styles and preview shapes are calculated locally in your browser. No design data is sent to any server.