v145 · CSS · Rendering · demo

Card Gallery

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

Chrome 145+ — box-shadow edge computation uses the resolved (clamped) border-radius, matching Firefox and Safari. The difference is most visible on circles and pills where the shadow previously spread slightly wrong at the corners.

Toggle between "Before fix" and "After fix" · compare the shadow edge on circles and pill shapes · the avatar circle and badge show the most visible difference

Shadow mode
Correct: box-shadow uses resolved border-radius — shadow hugs the circular edge.
What changed
Before Chrome 145 Shadow edge computed from raw border-radius — slightly too spread at corners on circles and fully-rounded shapes
Chrome 145+ Shadow edge uses resolved (clamped) border-radius — hugs the actual element edge precisely, matching Firefox and Safari
Affected shapes border-radius: 50% on a square; 9999px pills; any radius ≥ half the element dimension 
/* Box-shadow with high border-radius — Chrome 145 fix */

/* Fully circular element */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* Chrome 145: shadow hugs the circle edge correctly */
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Pill (border-radius >= height/2 → clamped to circle) */
.pill {
  border-radius: 9999px; /* resolves to 50% of shorter dimension */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* No code change needed — Chrome 145 fixes the rendering automatically.
   The fix aligns Chrome with Firefox and Safari behaviour. */

see also