Border Radius Previewer
Create organic shapes using advanced border-radius values.
Last reviewed by the Radiatus Cloud team
Corners (%)
border-radius: 0% 0% 0% 0%;
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Go beyond rounded rectangles
The CSS border-radius property can do far more than round corners evenly: with eight values instead of one it creates smooth, organic, asymmetric shapes, the soft blobs and fluid forms seen across modern design. This previewer lets you craft those advanced border-radius values visually and see the shape update live as you adjust, which is the only practical way to design them. What would be impossible to picture from numbers becomes something you shape by eye.
How eight values make a blob
A single border-radius value rounds all four corners equally. Border-radius actually accepts a separate horizontal and vertical radius for each of the four corners, eight numbers in total, and varying them independently produces asymmetric curves that read as organic rather than geometric. Adjusting eight interacting numbers by hand is pure guesswork, which is exactly why adjusting them visually and reading off the resulting value is how these fluid shapes are actually made in practice.
Copy the exact CSS
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
How does border-radius make organic shapes?
By accepting a separate horizontal and vertical radius for each corner, eight values in all. Varying them produces smooth asymmetric curves rather than uniform rounded corners.
What is the blob shape used for?
Soft, organic background shapes and decorative elements common in modern design, which look hand-drawn and fluid rather than geometric.
Can I get the exact CSS?
Yes. The tool gives you the full border-radius value for the shape you craft, ready to paste into your stylesheet.
Why craft it visually?
Because eight interacting numbers are impossible to tune by hand. Seeing the shape update as you adjust is the only practical way to design these curves.
Is my input uploaded?
No. The tool runs entirely in your browser.
Privacy & Security
Generated locally.
About This Tool
This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.