Border Radius Playground
Shape boxes with eight independent handles — one X and one Y radius per corner — and watch the preview update live. Copy the CSS `border-radius` value (including the per-corner `horizontal / vertical` syntax) or apply a preset like pill, circle, squircle or card.
How to use
- 1
Drag the handles
Use the eight sliders (or numeric inputs) to set the X and Y radius of each corner independently. The preview updates instantly.
- 2
Apply a preset
Use Sharp, Card, Pill, Circle or Squircle to jump to common shapes. Pill and Circle use 9999 px for fully-rounded corners.
- 3
Read the CSS
The output panel shows the exact CSS `border-radius` declaration. When X and Y differ, the per-corner `horizontal / vertical` shorthand is emitted.
- 4
Copy
Click “Copy CSS” to put the declaration on your clipboard, ready to paste into your stylesheet or inline style.
Common use cases
- Design squircle or asymmetric corner shapes for app icons and cards.
- Generate the per-corner `horizontal / vertical` border-radius syntax without typos.
- Match a Figma corner-radius spec exactly when porting it to CSS.
- Prototype pill, circle and card shapes for a component library.
Limitations
- The squircle preset approximates the superellipse using X/Y radii — true SVG squircles require a path, not a border-radius.
- Sliders cap at 200 px; use the numeric input to go higher (up to 999 for pill-style rounding).
- Border-radius is not animatable across all units — prefer transitioning between two values of the same unit.