Border Radius
Shape any corner
border-radius: 20px;
What is Border Radius?
Shape any corner of an element with independent control — or link all four together for a uniform rounding. Toggle between pixel and percent units. Live preview shows the result on a coloured swatch so you can judge the shape at a glance before copying the CSS.
How do I use Border Radius?
- Pick linked (uniform) or per-corner mode.
- Drag each slider to set the radius.
- Switch between px and % units.
- Copy the CSS.
When should I use Border Radius?
Border Radius is for corner shapes. For non-rectangular shapes (triangles, stars, hexagons), use Clip Path.
Can I set different radii for each corner?
Yes. Four independent corner sliders, plus elliptical radii (X / Y per corner) for shapes like pill capsules or teardrops.
Does the tool output shorthand CSS?
Yes — border-radius: 10px 20px 30px 40px when corners differ, or a single value when they match. Paste it straight into your stylesheet.
Can I preview on different element shapes?
Yes. Toggle between square, rectangle (wide), and rectangle (tall) to see how the same radii render across aspect ratios.
Is my file uploaded anywhere?
No. Everything runs in your browser. Your files never leave your device, and there is no server component for this tool.