Comments on: shape(): A New Powerful Drawing Syntax in CSS https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/ Helping Your Journey to Senior Developer Wed, 04 Jun 2025 11:05:29 +0000 hourly 1 https://wordpress.org/?v=6.8.3 By: Ana Tudor https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27876 Thu, 15 May 2025 05:34:36 +0000 https://frontendmasters.com/blog/?p=5662#comment-27876 In reply to pd.

Just to clarify: this is NOT a non-standard feature. It is a standard feature (spec here https://drafts.csswg.org/css-shapes-2/#shape-function) and it has been badly needed for years – I’ve been wanting something like this for over half a decade https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/

A shape() implementation that’s still very much under development (only very simple shapes seem to work – no curves, but can use calc() and var()) can be tested in Firefox when enabling the layout.css.basic-shape-shape.enabled flag in about:config. And I would absolutely recommend that people have fun with it and record any bugs they might find.

]]> By: pd https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27581 Sun, 11 May 2025 04:43:23 +0000 https://frontendmasters.com/blog/?p=5662#comment-27581 Wow, you’re having a lot of fun whilst ignoring (“but whatever”, very so Cal) Firefox. Could you include the Baseline box at the top to make this more obvious? That way, people will both more obviously recognise that you’re playing with non-standard features and maybe doing so will push Mozilla to support them.

]]> By: Chris Coyier https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27477 Fri, 09 May 2025 19:49:27 +0000 https://frontendmasters.com/blog/?p=5662#comment-27477 In reply to Matthew Morete.

Holy crap that rules Matthew!

]]> By: Matthew Morete https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27475 Fri, 09 May 2025 18:02:19 +0000 https://frontendmasters.com/blog/?p=5662#comment-27475 Was very happy to discover the new shape() fully recreates the svg syntax.
It’s largely the same, just with rearranged arguments and combines a few commands together using optional parameters.
Managed to get a converter working:
https://path-to-shape.netlify.app/
A converter can’t mix units for top tier responsiveness but percentages is probably a good starting point

]]> By: Chris Coyier https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27408 Thu, 08 May 2025 20:11:55 +0000 https://frontendmasters.com/blog/?p=5662#comment-27408 In reply to Noam Rosenthal.

Ah nice!

I think I got it working, overriding a path() here when @support-ed
https://codepen.io/chriscoyier/pen/GggQrQq

]]> By: Noam Rosenthal https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27379 Thu, 08 May 2025 11:15:00 +0000 https://frontendmasters.com/blog/?p=5662#comment-27379 (… also, offset-path: shape() works in Safari, and will work in Chrome starting version 137).

]]> By: Noam Rosenthal https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/#comment-27375 Thu, 08 May 2025 10:43:25 +0000 https://frontendmasters.com/blog/?p=5662#comment-27375 Thanks for this post!
It’s definitely possible to create pseudo-squircles with shape(), however the corner-shape property we’re working on would enable those also in borders and shadows and not just as a clip-path.

]]>