Clamping Order of rx and ry Defaults in Non‑Square SVG Rectangles

Direct Answers

1. Clamping order: The specification defaults ry to the author-specified rx value first, then clamps each radius independently — rx to half the rectangle width, ry to half the rectangle height.
2. Attribute vs CSS: In SVG 2–conformant engines, the same default-then-clamp algorithm applies to computed CSS values. Observed differences stem from incomplete geometry-property support (CSS rx/ry ignored or not animatable), not a different clamping sequence.
3. Negative rx with ry omitted: The negative value is invalid and treated as unspecified. Both radii fall back to their initial value of 0 (square corners). There is no "unspecified radius state" that preserves a prior value.

Specification Algorithm

The SVG 1.1 and SVG 2 specs define the used-value computation for <rect> corner radii as:

1. Resolve each attribute/property to a specified value (or initial value if absent/invalid).
2. If only one of rx, ry is specified, the other takes the same specified value.
3. Clamp rx to min(rx, width/2) and ry to min(ry, height/2) independently.

Step 2 uses the specified (pre-clamp) value. Therefore, on a width=100, height=40 rectangle with rx=30 and no ry:

• ry receives the specified 30, not the width-clamped 30 (which happens to be the same here).
• Height clamp then reduces ry to 20 (height/2).
• Result: rx=30, ry=20 — a perfect stadium/pill shape.

If clamping occurred before defaulting, ry would inherit the already-clamped rx and also be 30, which would then be clamped to 20 anyway in this example. The difference appears when the authored rx exceeds half the height but not half the width — the height clamp still applies to the inherited value.

Negative Value Handling

A negative rx or ry is an invalid value. Per SVG 2 §5.3, an invalid value is treated as if the attribute were not specified. With rx=-5 and ry omitted, both attributes are effectively absent, so both used values become 0. The rectangle renders with sharp corners.

Attribute vs. CSS Geometry Properties

SVG 2 reclassifies rx and ry as geometry properties, making them stylable via CSS. The cascade order is:

• CSS declarations (author, user, UA) win over presentation attributes.
• The same default-then-clamp algorithm runs on the computed values after the cascade.

In practice:

• Modern engines (Firefox 95+, Chrome 100+, Safari 15+): CSS rx/ry work and produce identical results to attributes.
• Older engines: Ignore CSS rx/ry entirely; only presentation attributes apply.
• Animation: CSS transitions/animations on rx/ry require geometry-property support; SMIL <animate> works on attributes in more engines.

Practical Pill Recipe

To author a stadium shape that adapts to any aspect ratio without scripting:

<rect width="100" height="40" rx="50" />
/* or via CSS */
rect { rx: 50%; }  /* see caution below */

Any rx ≥ max(width, height)/2 (or 50% if percentage resolves against the viewport diagonal) yields rx=width/2, ry=height/2 after independent clamping.

Verification Steps

1. Render <rect width="100" height="40" rx="30"/> — measure corner radii (expect rx=30, ry=20).
2. Render <rect width="100" height="40" rx="-5"/> — confirm square corners.
3. Compare attribute rx="30" vs CSS rect { rx: 30px } in target browsers.
4. Where supported, read getComputedStyle(rect).rx and .ry to confirm used values.

Cautions

• Percentage rx/ry resolve against the viewport's normalized diagonal (√(width²+height²)/√2) in SVG 2, not the rectangle's own dimensions. rx: 50% does not reliably produce a pill on all viewports.
• Engine bugs exist: some older Blink versions clamped before defaulting; test in your support matrix.
• Clamping is per-axis; authored equality does not guarantee used equality on non-square rectangles.