Your files stay on your device

# CSS border radius generator

Set horizontal and vertical radius per corner in px or percent, link corners, and copy the shorthand or longhand border-radius with a live preview.

The slash syntax is the whole trick: border-radius: h values / v values gives each corner an ellipse instead of a circle, which is where blob shapes come from. Two honest caveats the output says out loud: when adjacent radii on one side add up past that side's length, CSS does not overflow, it scales every radius by the same factor so the curve still fits; and the 9999px pill works because the browser clamps each radius to the box, not because 9999 is meaningful. Percent values are per axis, so 50% is only round on a square box.
Options

## More regex & cron tools

- [CSS gradient builder](/color/gradient)
- [Aspect ratio and DPI](/converters/aspect-ratio)
[All regex & cron tools](/dev)

Was this tool useful?
YesNo

---

Canonical HTML: https://nutter.tools/dev/css-border-radius-generator
Markdown version: https://nutter.tools/dev/css-border-radius-generator.md
Plain-text version: https://nutter.tools/dev/css-border-radius-generator.txt
Agent index: https://nutter.tools/llms.txt