v145 · CSS · Radius Stress Test

Radius stress test

Slide the border-radius from 0 to 999px and watch the pill shape converge to a perfect oval — both the outer edge and the box-shadow ring follow the same refined ellipse math.

radius slider

border-radius: 999px; box-shadow: 0 0 0 6px;

Left: solid ring; right: soft drop-shadow. Both use the same border-radius — Chrome 145 ensures the shadow tracks the corner curve precisely even at very large radii.

code

.pill {
  border-radius: 999px;
  box-shadow: 0 0 0 6px var(--accent-blue), 0 12px 25px rgba(0,0,0,0.2);
}
/* Chrome 145 computes the inner shadow edge using the same elliptical
   geometry as the outer border, so the ring no longer pokes out. */

see also