SVG Rounded Rectangle Generator
Generate an SVG rounded rectangle with custom width, height, corner radius, fill and stroke, and copy clean scalable code.
Last reviewed by the Radiatus Cloud team
Generate a rounded rectangle as clean, scalable SVG code.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Generate rounded rectangles as SVG
Rounded rectangles are everywhere in modern interfaces, from cards and buttons to badges and containers. This generator creates one with the width, height and corner radius you specify, plus fill and stroke colours, and gives you clean SVG code. The corner radius controls how soft the corners look: a small value gives a subtle rounding, while a large value approaching half the height produces a pill or capsule shape.
The viewBox is sized to include the stroke, so the shape is never clipped at the edges.
Using rounded rectangles
As scalable SVG, a rounded rectangle stays crisp at any size and can be used as a button background, a card outline, a placeholder or a decorative block. Because it is a single rect element with corner radius attributes, it is easy to adjust the dimensions or colours afterwards or style it with CSS. The rounded corner is a hallmark of friendly, approachable design.
The output is self-contained and works anywhere SVG is supported. Everything is generated locally in your browser.
Notes
This SVG Rounded Rectangle Generator tool runs entirely in your browser, so nothing you enter is uploaded or stored on a server. The generated output is plain, standards-compliant code that you can copy, paste, edit and reuse freely in your own projects, documents and designs without any attribution or sign-up.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
What does the corner radius do?
It sets how rounded the corners are. A larger radius gives softer corners, and a value near half the height makes a pill shape.
Can I make a pill or capsule shape?
Yes. Set the corner radius to half the height or more and the rectangle becomes a fully rounded pill.
Is the stroke included in the size?
Yes. The viewBox accounts for the stroke width so the outline is never clipped at the edges.
How do I change the size later?
Edit the width and height attributes in the generated SVG, or scale it with CSS since it is a vector.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Set the width, height, corner radius and colours, then generate.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.