CSS Border Radius Generator
Shape corners with independent radii and copy the CSS.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Sets each corner independently, with a link switch to keep them equal, and previews the result on a card. It also generates the elliptical two-value syntax for organic shapes.
How to use it
- Adjust the four corner values.
- Enable elliptical corners if you want a softer, asymmetric shape.
- Copy the border-radius declaration.
Frequently asked questions
What is the slash syntax?
It sets horizontal and vertical radii separately, for example 30% / 60%, producing an ellipse rather than a circle at each corner.
Why did my pill shape break?
A radius larger than half the shortest side is capped by the browser. Keep it at or below that value for a clean pill.
Keep going
Related tools
CSS Box Shadow Generator
Design layered shadows and copy the CSS.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
CSS Grid Playground
Prototype grid layouts and copy the CSS.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.