v145 · CSS · Shadow Demo

Shadow Demo

Elements with high border-radius values and box-shadow — the shadow edges are computed correctly in Chrome 145, matching Firefox and Safari.

shadow edge shapes

border-radius: 50%

Perfect circle

border-radius: 9999px (pill)

Clamped to 50% of height

border-radius: 40px (= 50%)

Exactly circular corners

border-radius: 200px

Clamped to 50% of width

what changed

/* Before Chrome 145: shadow edge shape used unclamped border-radius
   → Shadow at circular corners was slightly too large / wrong shape

   Chrome 145: shadow edge uses the RESOLVED (clamped) border-radius
   → Shadow matches the actual visible corner shape

   The visual difference is subtle but noticeable on large spread shadows
   with highly rounded corners — particularly on circular elements. */

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;  /* resolves to 50px — Chrome 145 uses 50px for shadow */
  box-shadow: 0 0 0 4px blue, /* outline ring */
              0 4px 20px rgba(0,0,0,0.5); /* drop shadow */
}
/* The outline ring and drop shadow are now consistently shaped. */

scenario focus

Select a scenario to focus its rendered example and summary.