Draw a Rounded Rectangle with SVG Path Commands

Building a Rounded Rectangle with Arcs

While SVG has a <rect> element with rx and ry for uniform corner rounding, using a <path> lets you set different radii for each corner. This is the same idea behind CSS border-radius with four values.

The Path (10px radius on all corners)

M 10,0 L 90,0 A 10,10 0 0,1 100,10 L 100,90
A 10,10 0 0,1 90,100 L 10,100 A 10,10 0 0,1 0,90
L 0,10 A 10,10 0 0,1 10,0 Z

Segment-by-Segment Breakdown

1. M 10,0 — Start at the top edge, offset by the corner radius.
2. L 90,0 — Draw a horizontal line across the top.
3. A 10,10 0 0,1 100,10 — Arc for the top-right corner.
4. L 100,90 — Vertical line down the right side.
5. A 10,10 0 0,1 90,100 — Arc for the bottom-right corner.
6. L 10,100 — Horizontal line across the bottom.
7. A 10,10 0 0,1 0,90 — Arc for the bottom-left corner.
8. L 0,10 — Vertical line up the left side.
9. A 10,10 0 0,1 10,0 — Arc for the top-left corner.
10. Z — Close the path.

Independent Corner Radii

Replace each arc's rx,ry and adjust the line endpoints accordingly. For example, a top-left radius of 20 and other corners at 5:

M 20,0 L 95,0 A 5,5 0 0,1 100,5 L 100,95
A 5,5 0 0,1 95,100 L 5,100 A 5,5 0 0,1 0,95
L 0,20 A 20,20 0 0,1 20,0 Z

Why Use Path Instead of <rect>?

The <rect> element only supports a single rx / ry pair, applied uniformly to all four corners. A path gives you complete control, plus compatibility with path-based animations and morphing libraries like GSAP MorphSVG.