Foundations
Shape
A corner scale from none to full, plus corner styles beyond plain rounding. In M3 Expressive, shapes also respond: corners morph when you press or select something.
Corner scale
Use them as rounded-shape-* utilities or --ex-shape-corner-* variables. The CLI's corner scale option multiplies the whole scale: soft by 1.25, sharp by 0.5.
Corner styles
Press one to see its corners morph.
<div className="rounded-shape-extra-large corner-squircle" />
<div className="rounded-shape-large corner-cut" />
<button className="rounded-pill [--ex-control-height:3rem] h-(--ex-control-height)" />Pills that animate well
A "full" radius is usually written as 9999px. That's fine at rest, but a spring animating from 9999px to 16px stays round for most of the animation, then snaps, and its overshoot can briefly clamp to a sharp square. rounded-pill uses half the control's real height instead (from --ex-control-height), so the morph stays smooth. Use it for anything round that changes shape.
Material shapes
Beyond corners, M3 Expressive has a library of 35 shapes, from the cookies and clovers to the burst, flower and heart. Pick one to see the preview morph into it.
<Shape name="flower" /><Shape name="cookie-9" className="size-24 text-primary" />
<img src={photo} alt="" className="size-16 object-cover shape-clover-4" />Add them with npx @grenishrai/expressive add shape. See the Shape component for the full list of names and options.
Customizing
createTheme({ shape: { corners: { medium: 14, large: 20, "extra-large": 32 } } });