CSS polygon() vertex rounding (round <length>) #1418

I propose including vertex rounding for CSS polygon() as an Interop 2027 Focus Area.

CSS Shapes Level 1 defines the optional round syntax for polygon(), allowing authors to round polygon vertices directly.

For example:

clip-path: polygon(
round 20px,
50% 0%,
100% 100%,
0% 100%
);

The proposed scope is interoperability of the existing standards-defined polygon(round , ...) behavior, including:

parsing and serialization;
computed values;
rendering when used with clip-path;
radius clamping as defined by CSS Shapes;
interpolation and animation where existing WPT coverage is sufficient.

This proposal does not introduce new syntax, per-vertex radii, or additional corner styles.

Without this feature, authors who need rounded triangles, hexagons, speech bubbles, angled cards, image cutouts, and other polygonal UI shapes often need to use more complex alternatives such as SVG or path() geometry, CSS masks, additional polygon points, or generated geometry.

Standards status

Vertex rounding for polygon() is already defined in CSS Shapes Level 1.

The corresponding CSSWG discussion is w3c/csswg-drafts#9843. The issue is closed and marked "Accepted by CSSWG Resolution".

This proposal therefore concerns interoperability of an existing standards-track feature rather than the design of a new CSS feature.

Implementation status
Blink: shipped in Chrome 150.
WebKit: the standards-position request WebKit/standards-positions#474 is currently open.
Gecko: mozilla/standards-positions#1197 currently has the status "Needs proposed position".

This creates an interoperability gap where authors cannot currently rely on polygon(round , ...) consistently across browser engines.

Existing tests

WPT already includes coverage for:

valid clip-path: polygon(round ...) syntax;
invalid rounding syntax;
computed values and serialization;
direct rendering of a rounded polygon() with clip-path.

This provides existing automated coverage suitable for an interoperability-focused effort.

Developer need and workarounds

The original CSSWG proposal describes a broad range of cases where authors want to clip or mask an element using a simple polygon with rounded vertices.

Without native polygon vertex rounding, authors commonly need alternatives such as:

manually adding additional polygon points to approximate curves;
SVG or path() geometry;
CSS masks;
filters;
generated geometry using Sass or JavaScript.

Native polygon(round , ...) makes these shapes significantly simpler while retaining the responsive percentage- and length-based geometry supported by polygon().

Compatibility impact

The syntax is additive and does not change the behavior of existing polygon() declarations.

The main compatibility problem today is lack of cross-engine support: a declaration using round cannot provide the intended rounded geometry in engines that do not yet implement the syntax.

Size and feasibility

The feature has a relatively small and well-defined scope.

It already has:

specification text;
a CSSWG resolution;
a shipping Blink implementation;
WPT coverage for parsing, computed values, invalid syntax, and rendering.

This makes it suitable for an interoperability-focused effort.

Proposed minimum scope

The proposed minimum Interop scope is:

parsing round in polygon();
serialization and computed values;
radius clamping behavior defined by CSS Shapes;
rendering with clip-path;
interpolation and animation where applicable and covered by WPT.