v150 · CSS · Shapes · Clip
Fill Rule Combinator
polygon() accepts a fill-rule keyword (nonzero or evenodd) and a rounding parameter. Chrome 150 lets you combine them: polygon(evenodd round 12px, …). This demo shows every combination across self-intersecting shapes and ordinary polygons where fill-rule deliberately has no visible effect.
Checking polygon(round …) support…
nonzero (default): fills regions based on winding direction. A true pentagram keeps the wound center filled.
evenodd: alternates fill/empty each time the outline crosses a region. A true pentagram can punch out the center.
round <r> (Chrome 150): rounds every vertex by radius r. Stacks with fill-rule:
evenodd: alternates fill/empty each time the outline crosses a region. A true pentagram can punch out the center.
round <r> (Chrome 150): rounds every vertex by radius r. Stacks with fill-rule:
polygon(evenodd round 12px, …)
Interactive Combinator
Corner radius (px)
12px
Element size (px)
160px
polygon(nonzero round 12px, pentagram)
clip-path: polygon(nonzero round 12px, …);
argument order
valid order
invalid order
see also
- Shape Explorer — rounding slider for common shapes
- shape-outside Rounded — rounded float exclusions
- Clip-Path Gallery — visual clip gallery
- ChromeStatus entry
- MDN — polygon()
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗