CSS `shape()` basic shape function

[jsnkuhn]

Description

The shape() function can be thought of as a more CSS friendly version of the existing path() function that is based in SVG. path() only allows fixed SVG like unit-less pixel values shape() allows the use of different CSS value (px, em, rem, %). shape() also supports CSS functions like calc() and var() which allows shape() to be used for responsive design something that path() can't do.

Specification

https://drafts.csswg.org/css-shapes/#shape-function

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/shapes/ (shape() is mentioned here but it should probably have it's own listing)

Test Links

https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned

Additional Signals

Chrome and edge had the test implementation on this. Safari and Firefox have already done some work.

Firefox

Standards position:
mozilla/standards-positions#1153

Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1910328

Experimental features page:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#shape_function

Safari

Bugzilla:
https://bugs.webkit.org/show_bug.cgi?id=238371

Standards position (support):
WebKit/standards-positions#377

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature shapes

• ID: shapes
• Name: shapes
• Description: The circle(), ellipse(), inset(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside.
• Baseline status: Widely Available
• Docs: , circle(), ellipse(), inset(), polygon(), rect(), shape(), xywh()
• More information: See the web-features explorer

[wpt-interop]

Thank you for proposing CSS shape() basic shape function for Interop 2026.

We are pleased to let you know that it has been accepted as part of the CSS shape() focus area.

You’ll be able to track progress on this topic throughout the year via the Interop 2026 dashboard.

Posted on behalf of the Interop team.

[cyberalien]

Can you please add check if path() function works for d attribute of <path /> element in SVG?

Current tests are a bit misleading because of Safari. It can parse path() and shape() functions, but path() does not work in <path /> elements of SVG. In Chrome and Firefox it does work. So while technically Safari handles it, usage is limited.

[jgraham]

@cyberalien If you would like to add additional test coverage for this focus area, can you please file a new "Test Change Proposal" issue? That will put the change onto the triage queue.