SVG rect: Readable Markup, Silent Clamping, and Accessibility Gaps

The rounded rectangle that did not behave

You add an SVG rectangle with rx="20" expecting a modest corner radius, but the rendered shape looks like a pill instead. The markup is valid, the browser shows no error, and the corner radius simply expands beyond what you asked for.

The useful takeaway: <rect> is the right element for axis-aligned rectangles, but its corner-radius attributes are clamped by the renderer, and a bare rectangle is invisible to assistive technology unless you add an accessible name.

What <rect> declares

An SVG <rect> element draws an axis-aligned rectangle using x and y for the top-left corner, width and height for size, and optional rx and ry for horizontal and vertical corner radius. Axis-aligned means the sides run parallel to the SVG coordinate axes; the element cannot describe a rotated rectangle on its own.

If you provide rx but omit ry, the renderer uses the rx value for both corners. If you omit both, the corners are square. Standard presentation attributes such as fill, stroke, stroke-width, and opacity apply as they do to other SVG shapes.

Corner radius values are clamped automatically

When rx or ry exceeds half the rectangle's width or height, the rendering engine clamps it to that maximum. A narrow rectangle with rx="100" does not overflow or break; it silently becomes pill-shaped. This behavior is consistent across major browsers, but it means the attribute you write is not always the radius you see.

Worked example: visible clamping

<svg width='400' height='120' xmlns='http://www.w3.org/2000/svg'>
  <rect x='10' y='10' width='80' height='40' rx='4' ry='4' fill='#4a90d9' />
  <rect x='110' y='10' width='80' height='40' rx='20' ry='20' fill='#4a90d9' />
  <rect x='210' y='10' width='80' height='40' rx='100' ry='100' fill='#4a90d9' />
  <rect x='310' y='10' width='80' height='40' fill='#4a90d9' />
</svg>

The first rectangle has subtle rounded corners. The second has clearly rounded corners. The third requests rx="100" on an 80-pixel-wide shape, so the renderer clamps the radius to 40 pixels and produces a pill shape. The fourth has square corners because no radius was supplied.

<rect> versus an equivalent <path>

You can draw the same shape with a <path> using arc commands, but the markup is longer and harder to read. <rect> signals intent to anyone reading the code and to tooling that inspects SVG structure. The painted pixels are usually identical, so choose <rect> for maintainability unless you need rotation, arbitrary curves, or complex hit-testing that a path simplifies.

Accessibility is not automatic

A bare <rect> conveys no meaning to screen readers. Add a child <title> or <desc> element, or use aria-label with role="img", depending on whether the rectangle is decorative or informative. Decorative shapes can be hidden with aria-hidden="true".

Verify geometry in developer tools

Open the page in Chrome, Firefox, Safari, or Edge, select a <rect> in the Elements panel, and run this in the Console:

document.querySelector('rect').getBBox()

The returned DOMRect should match the element's x, y, width, and height attributes. This is a read-only check with no risk to the page. If the values differ, confirm that CSS transforms or parent coordinate systems are not affecting the element.

Limitations and when to switch

<rect> cannot rotate directly. To rotate a rectangle, apply a transform attribute or switch to <path>, both of which complicate layout and hit-testing logic. Corner-radius clamping can also hide mistakes; if a radius looks too large, compare it against half the width or height.

Takeaway

Use <rect> for axis-aligned rectangles because it is readable and intent-revealing. Test corner radii against your actual dimensions, clamp expectations to half the width or height, and always supply an accessible name for meaningful shapes.