demo · v150
offset-path with rounded polygon
polygon(round <r>, …) isn't just for clip paths — it also works in offset-path, letting an element travel along a rounded path. Compare sharp vs rounded: the traveller element follows the same polygon, but with a corner radius applied the path curves smoothly instead of making hard turns.
sharp vs rounded — side by side
Sharp corners — polygon(…)
Rounded corners — polygon(round 20px, …)
how it works
The CSS Motion Path spec allows any basic shape as an offset-path. With Chrome 150's polygon(round …) extension, the same path that rounds clip corners also rounds the travel path — no separate SVG <path> element, no bezier control point math. The browser interpolates the rounded corners automatically.
The traveller respects offset-rotate: auto, so it faces the direction of travel at every point — including smoothly around the rounded curves.
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗