SVG Rectangle with Rounded Corners: How rx and ry Work

The short answer

In SVG, you round a rectangle's corners with the rx and ry attributes on the rect element. rx sets the horizontal corner radius and ry sets the vertical one. If you supply only one of them, the other uses the same value, so a single rx gives evenly rounded corners. This is native vector geometry. The shape stays sharp at any size and remains editable as a rectangle in most vector tools.

<svg viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1a73e8"/>
</svg>

This example draws a 32 × 32 square with a 6-unit corner radius, which is a common starting point for a favicon background tile. A standalone .svg file also needs the standard SVG namespace declaration on the root svg element. Inline SVG placed directly in HTML does not.

How the rx and ry values behave

• Equal rx and ry give circular corners. Different values give elliptical corners.
• If a radius is larger than half the rectangle's width or height, the renderer clamps it to that half. For a square, rx set to half the width produces a circle. A wider rectangle at maximum radius becomes a pill shape.
• Negative radius values are invalid and should not be used.
• The radius is measured in the same user units as the viewBox. A radius of 6 in a 32-unit viewBox is the same proportion of the shape at every display size.

When to use a path instead of rect

A rect applies the same radius to all four corners. If you need different radii per corner, such as rounded top corners with a square bottom, draw the shape as a path with arc commands. Some editors also convert rounded rectangles to paths on export. When that happens, the shape renders identically but can no longer be adjusted as a rectangle.

<!-- All corners rounded, radius 6 (equivalent to the rect above) -->
<path d="M6 0H26A6 6 0 0 1 32 6V26A6 6 0 0 1 26 32H6A6 6 0 0 1 0 26V6A6 6 0 0 1 6 0Z"/>

<!-- Top corners rounded, radius 8; bottom corners square -->
<path d="M8 0H24A8 8 0 0 1 32 8V32H0V8A8 8 0 0 1 8 0Z"/>

Aspect | rect with rx/ry | path with arcs

Per-corner control | No, one radius for all corners | Yes

Ease of editing radius | Change one attribute | Rewrite several coordinates

Editability in vector tools | Usually stays a live rectangle | Treated as a general path

Rendering result | Identical for uniform corners | Identical for uniform corners

Strokes and rounded corners

A stroke is centered on the shape's outline. A rect that fills the whole viewBox will therefore have half its stroke cut off at the edges. To keep the full stroke visible, inset the rectangle by half the stroke width. The radius applies to the stroke's centerline, so the outer edge of the stroke curves slightly wider than rx.

<svg viewBox="0 0 32 32">
  <rect x="1" y="1" width="30" height="30" rx="5"
        fill="none" stroke="#1a73e8" stroke-width="2"/>
</svg>

Rounded rectangles in SVG favicons

Many favicons use a rounded square as a background tile, and a rect with rx is the simplest way to build one. You reference the file with a link element whose rel is icon and whose type is image/svg+xml. Keep these practical points in mind:

• Favicons display very small, so small radius differences may disappear. Check the result at the actual display size.
• SVG favicon support differs between browsers, so supply a raster fallback (PNG or ICO) alongside the SVG.
• Some platforms apply their own mask or corner rounding to home-screen icons. Adding rounded corners to those images can produce doubled or uneven rounding. Check each platform's current icon guidelines before baking corners into those assets.

Confirm the rounded shape is actually vector

A file ending in .svg does not guarantee editable vector geometry. Some SVG files only wrap an embedded raster image, such as a PNG inside an image element, or include a raster preview. In those files, the rounded corners are pixels and not a rect or path. Open the file in a text editor or a vector tool and look for a rect with rx/ry or a path with arc commands. If you find only an image element with encoded data, the corners cannot be resized or edited as vectors.

Evidence gaps

No specific evidence was supplied for this article on current browser support for SVG favicons, the export behavior of particular design tools, or support for setting rx and ry through CSS. The guidance above reflects the general SVG specification behavior. Check current browser and tool documentation before relying on any of those details in production.