Preview URLs

• /en-US/docs/Web/CSS/basic-shape/shape

(comment last updated: 2025-05-10 02:28:57)

the example is giving me text ("Your browser doesn't support the shape() function yet.")
instead of the shape in edge and chrome, which are both listed as supportive.

My only comment is that, in .shape2 in the second example, the first shape looks a bit messy. It should surely be symmetrical?

@chrisdavidmills I tried to make it a heart. Now I've made it symmetrical.

instead of the shape in edge and chrome, which are both listed as supportive.

@estelle try nightly or dev builds of Chrome. Or try Safari on ipad.

@chrisdavidmills it's a bit complicated. There are two things to consider:
a. The support for the original shape() with via keyword. The BCD is correct.
b. The shape() function got its syntax changed via -> with. Only Safari has made prod release of this change. Others are still catching up.

@chrisdavidmills it's a bit complicated. There are two things to consider: a. The support for the original shape() with via keyword. The BCD is correct. b. The shape() function got its syntax changed via -> with. Only Safari has made prod release of this change. Others are still catching up.

You are right, but the trouble is that the via -> with change and the updated demos make the BCD appear incorrect for Chromium browsers. Would it be worth adding a note to clarify? It is such a minor change that it doesn't warrant a subfeature or alternative name.

I don't think this blocks the merge, BTW. I'm happy to merge as-is.

Would it be worth adding a note to clarify?

Yes, let's add the note in BCD. Raised an issue there: mdn/browser-compat-data#26756

instead of the shape in edge and chrome, which are both listed as supportive.

@estelle try nightly or dev builds of Chrome. Or try Safari on ipad.

Shape() is supported for clip-path but not offset path in Edge. We should likely updated the generated content to say that.

I was working on a heart:

 clip-path: shape(
    from 20px 70px, 
    arc to 100px 70px of 1% cw,
    arc to 180px 70px of 1% cw,
    curve to 100px 190px with 180px 130px,
    curve to 20px 70px with 20px 130px);

in case you want to use it. (https://codepen.io/estelle/pen/PwwdrbR)