v150 · CSS · demo
Clip-Path Gallery
Six common clip shapes rendered with sharp corners (left) and with polygon(round …) (right) — the only change is adding round <length> inside the function.
Each card shows the before / after pair. The right shape is rendered using the Chrome 150 round keyword and the shared radius below — if your browser doesn't yet support it, the two shapes will look the same.
How it works
/* Before Chrome 150 — always sharp corners */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
/* Chrome 150+ — uniform corner rounding */
clip-path: polygon(round 16px, 50% 0%, 100% 100%, 0% 100%);
/* Also accepts fill-rule before round */
clip-path: polygon(evenodd round 16px, ...);
/* Works with shape-outside too */
shape-outside: polygon(round 20px, 50% 0%, 100% 100%, 0% 100%);see also
- Shape Explorer — interactive slider
- Back to feature index
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗