v145 · CSS · Rendering

Refine border-radius shadow edge computation for high border-radius

Chrome 145 fixes the computation of box-shadow spread and blur edges for elements with very high border-radius values (including fully-circular elements), making the shadow shape match the spec and match Firefox/Safari.

background

When border-radius is so large that it makes an element appear circular (e.g., border-radius: 50% on a square, or any value above half the element's shorter dimension), Chrome previously computed the shadow's edge shape using the raw border-radius values rather than the clamped/resolved values. This produced shadows that were visually incorrect — slightly too large or the wrong shape at the edges.

Chrome 145 corrects the shadow edge computation to use the resolved border-radius after clamping, matching the CSS specification and the behaviour of Firefox and Safari.

concepts

  1. Shadow Demo

    Side-by-side comparison of circular elements with box-shadow — showing the before and after behaviour for high border-radius values.

  2. Computation Reference

    How border-radius clamping works, the formula for shadow edge shape, and which CSS border-radius patterns were affected by the fix.

  3. Radius Stress Test

    Drag the radius and shadow-width sliders and toggle the aspect ratio. The pill converges to a perfect ellipse, and the shadow tracks the curve precisely.

  4. Card Gallery

    A gallery of real-world UI components — avatar circles, profile cards, notification badges, pill buttons — all with high border-radius and box-shadow. Toggle between before/after Chrome 145 to see how the shadow edge fix changes each shape.

the change

/* These are all affected by the fix — border-radius produces a circle */

/* Fully circular */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Edge shape now correct */
}

/* Pill shape */
.pill {
  width: 200px;
  height: 60px;
  border-radius: 30px; /* equals height/2 — clamped */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Edge computation fixed */
}

/* Very large radius — effectively circular corner */
.card {
  border-radius: 9999px; /* clamped to 50% of shorter dimension */
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

references