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 the simulated "before Chrome 145" view and native Chrome 145+ rendering to see how the clamped border-radius shadow edge computation changes the visual result on each shape.

Chrome 145+ — box-shadow edge computation uses the resolved (clamped) border-radius, matching Firefox and Safari. Because current browser engines apply this fix automatically, the "Before Chrome 145" mode is an interactive CSS simulation showing the wider corner shadow spread of the older implementation.

Toggle between "Before Chrome 145 (simulation)" and "Chrome 145+ (native engine)" · compare the shadow edge on circles and pill shapes

Shadow mode
Native engine: 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