Allow optional rounding parameter for polygon()

concepts

1. Shape Explorer

   Pick a polygon shape, drag the rounding slider, and see the polygon(round …) CSS update live. Copy the generated code straight into your project.

2. Clip-Path Gallery

   A gallery of common clip shapes — triangle, diamond, hexagon, arrow — rendered once without rounding and once with polygon(round …), so you can see the difference at a glance.

3. Animated Clip Path

   polygon(round …) is fully animatable — transition or keyframe between sharp corners and rounded ones. Pick a shape, dial in a radius and duration, hover the left panel for a transition preview, and press Play for a continuous sharp ↔ rounded morph.

4. shape-outside Rounded Polygon

   Apply polygon(round …) to shape-outside so text flows around an organic, softened exclusion zone — no SVG, no bezier math. Choose a shape preset (triangle, diamond, hexagon, arrow, star), dial the corner radius, and watch the paragraph reflow around the rounded boundary.

5. Fill Rule Combinator

   polygon() accepts both a fill-rule keyword (nonzero or evenodd) and a round <r> rounding parameter at the same time. A 4-cell matrix shows every combination on self-intersecting shapes like a star; the interactive panel lets you mix fill rule, radius, and shape freely.

6. offset-path with rounded polygon

   polygon(round …) works in offset-path too — an element travels along a rounded polygon path instead of making hard turns. Pick a shape and drag the corner-radius slider; the traveller follows the live path with offset-rotate: auto so it always faces the direction of travel. Side-by-side comparison against the sharp-corner equivalent.

why it shipped

CSS has long supported polygon clip paths via polygon(x1 y1, x2 y2, …), but every corner is always sharp. Achieving rounded corners required either SVG clip paths, the shape() function with complex curve commands, or manually computing bezier control points — all verbose and fragile. Chrome 150 adds an optional round <length> parameter to polygon() that applies a uniform corner radius to every vertex. The same enhancement works anywhere polygon() is accepted: clip-path, shape-outside, and offset-path. The fill-rule keyword still works alongside it: polygon(evenodd round 12px, …).

references

• ChromeStatus entry
• MDN — polygon()
• Chrome 150 beta blog post