Web Tools
Border Radius Generator
Build CSS border-radius values visually with individual corner control, live preview, and ready-to-use presets. Runs entirely in your browser — your data never leaves your machine.
css border-radius design visual generator developer-tools
Published May 28, 2026
All interactive tools run entirely in your browser. Your data never leaves your device.
How It Works
Adjust each corner’s radius with range sliders and see the shape update in real-time. Link corners together for uniform radius, or unlink them for individual control. Choose from 12 presets or craft your own custom shape.
Features
- Live preview: see your border-radius update in real-time on a preview element
- Individual corners: control each corner independently (top-left, top-right, bottom-right, bottom-left)
- Link/unlink: toggle linked mode to adjust all corners together
- Multiple units: px, %, rem, em
- 12 presets: None, Small, Medium, Large, Extra Large, Circle, Pill, Top Only, Bottom Only, Left Only, Diagonal, Blob
- Copy CSS: one-click copy of the
border-radiusdeclaration - Private: runs entirely in the browser — no data transmitted
Presets
| Preset | Description |
|---|---|
| None | No rounding (0) |
| Small / Medium / Large / XL | Common rounded corner sizes |
| Circle | Perfect circle (50%) |
| Pill | Fully rounded sides (9999px) |
| Top / Bottom / Left Only | Rounded on one side only |
| Diagonal | Opposite corners rounded |
| Blob | Organic asymmetric shape |