Rect Border Radius in SVG: How to Round a Rectangle for Favicons and Logo Artwork

The short answer: SVG uses rx and ry, not border-radius

An SVG rect element does not use the CSS border-radius property. Its corners are rounded with two geometry attributes: rx sets the horizontal corner radius and ry sets the vertical corner radius. Set one value and the other follows it, which gives evenly rounded corners. This is the simplest way to build a rounded square, such as the tile behind a favicon or app-style logo mark, while keeping the shape fully vector.

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

The values in this snippet are illustrative, not a recommended standard. A standalone favicon file also needs the standard SVG namespace attribute (xmlns) on the root svg element. Inline SVG placed directly in an HTML page does not need it.

How rx and ry behave

• Equal values: if only rx or only ry is given, the missing one takes the same value, so the corners are circular.
• Different values: setting both to different numbers produces elliptical corners.
• Clamping: a radius larger than half the rectangle's width or height is reduced to that half. A square with a radius of half its side therefore renders as a circle.
• Percentages: percentage values are resolved against the SVG viewport, not against the rectangle itself. This can surprise you when the rect is smaller than the canvas, so plain user units in the viewBox coordinate system are usually more predictable.
• CSS: SVG 2 treats rx and ry as geometry properties, so current browsers can also set them from a stylesheet. The border-radius property itself still has no effect on a rect.

When a rect is not enough: rounding with a path

A rect applies the same radius to all four corners. To round only some corners, or to give each corner a different radius, draw the outline as a path. The path below reproduces the 32-unit rounded square from the earlier snippet with arc commands. To square off a corner, replace its arc with a straight line to the corner point. To change a corner's radius, change that arc's values and the neighboring straight segments.

<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"/>

Paths are also what many design tools produce on export. A rounded rectangle that was a live, adjustable shape in the editor may arrive as a path in the SVG file, or the reverse. A path can still be edited as vector geometry, but the single radius control is gone. You then change the corner by moving nodes or editing the path data.

Rounded square versus squircle

The corners of a rect with rx are circular or elliptical arcs. Where a straight edge meets an arc, the curvature jumps from zero to a constant value. A squircle is usually drawn as a superellipse or a close approximation of one. Its curvature builds gradually, so the outline looks softer and less like a square with circles pasted into the corners. Whether that difference matters for your mark is a design judgment, not a technical requirement.

SVG has no squircle element. A squircle always ends up as a path, typically made of cubic Bézier curves. Squircle generators output exactly that: path data you paste into the file, often with a setting for corner smoothing or the superellipse exponent. The snippet below is a simple smooth-cornered approximation for a 32-unit canvas. It is not a mathematically exact superellipse.

<path d="M0 16C0 2.4 2.4 0 16 0S32 2.4 32 16 29.6 32 16 32 0 29.6 0 16Z"/>

Method | Per-corner control | Smooth (squircle-like) curvature | Editable as one radius value

rect with rx/ry | No | No | Yes

path with arc commands | Yes | No | No, edit path data

path with cubic curves (squircle) | Yes | Yes | No, regenerate or edit nodes

clip-path using a rounded rect | Same as the clipping shape | Same as the clipping shape | Yes, if the clip is a rect

Practical points for favicon artwork

• Strokes sit on the center of the edge. A stroked rounded rect therefore has an outer corner radius of rx plus half the stroke width, and half the stroke can be cut off at the edge of the viewBox. Inset the shape, or use a filled shape instead of a stroke.
• Small sizes hide subtle differences. At the pixel sizes browsers use for tab icons, the difference between a rounded square and a squircle may not be visible. Check the icon rendered at its real display size rather than judging it zoomed in.
• Vector versus embedded raster: an SVG can contain an embedded bitmap through an image element. Rounding such an image with a clip-path gives rounded corners, but the artwork inside is still raster and will not scale cleanly. Having the .svg extension alone does not show that the logo is built from editable vector paths. Open the file and check what it contains.
• Platform masks: some platforms apply their own rounded mask to home-screen icons. Pre-rounding artwork for those contexts can produce doubled or uneven corners, so follow each platform's own icon guidance.
• Fallbacks: SVG favicon support differs between browsers and versions. Shipping raster fallback formats alongside the SVG is a common precaution. The supplied material contains no current support figures, so check this against present browser documentation.

Using someone else's logo

Being able to download a logo file does not give you permission to modify it. Adding rounded corners or a squircle tile to an existing brand mark changes the artwork, and the original fonts and trademarks may carry their own restrictions. For your own logo this is a design choice. For a third-party mark, check the owner's brand guidelines or license first.

What this article does not cover

No subject-specific evidence was supplied for this article. That means no tested browser support versions, recommended radius values for particular platforms, or comparisons of specific squircle generators. The guidance above relies on how SVG geometry is defined. Version-dependent details, especially favicon support and platform icon masks, should be checked against current official documentation.