Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon()
, circle()
, and ellipse()
, joining Chrome and Safari.
What will be nice about the Firefox release (well, it’s kinda already nice if you use something like Firefox Developer Edition which is already on 62), is that it has a shape editor built right into DevTools.
Chrome supports shape-outside
as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job. (Razvan contributed to the Firefox version as well, I hear.)
I enjoy using shape-outside
as it can add real visual interest to a page that isn’t nearly overdone or trendy just yet. Plus, in a lot of cases, it doesn’t matter whether it’s supported because the float behaves as a rectangle. If it causes major issues, you can wrap things in an @supports
block and do something different.
@supports (shape-outside: circle(50%)) {
img {
/* Only round the image if we can float around it too, otherwise leave it square. */
shape-outside: circle(50%);
border-radius: 50%;
}
}
I do have a few gripes with both the Firefox DevTools and the Chrome plugin though…
- I wish it was easier to add a new
shape-outside
to an existing element. You can do it, but you have to manually add something likeshape-outside: polygon(0 0, 10px 0, 20px 0);
or something to the element to kick off the tool, then start using it. - I wish they worked with
%
by default instead ofpx
units.
That second one particularly. It’s so common we size things flexibly these days that hard pixel values are sometimes useless and difficult to convert to flexible percentages.
You’re probably better off starting with Bennett Feely’s Clippy (it’s technically for clip-path
, but it includes polygon()
it works works for either. It works with percentages, so great, moving on from there.

“The frustrations of using CSS Shapes and CSS Exclusions”
That’s what Ben Frain recently blogged and it has some good points about all this. One key point is that using shape-outside
doesn’t necessarily mean that you’re clipping the background. Personally, I find that I’m cutting a shape on backgrounds that are transparent anyway, but I take the point.

clip-path
as well.The other big one is there is no shape-inside()
property (yet), so if you’re hoping to put some text inside a shape rather than have it wrap around the outside of a shape, no luck yet.
So it’s a plugin which converts images to svg?
It’s actually going to be a native feature in Firefox that supports CSS shapes — so it will be able to render the values of the property
shape-outside
, likecircle
,polygon
andellipse.
Chrome has an extension that will add that to its DevTools as well. :)
I find that a big drawback of shape-outside is that it works only with floats, thus breaking any flex or grid items which is quite the standard in layout right now. So, for example, wanting to have text aligned to the bottom of a container and at the same time shaping it with shape-outside becomes nearly impossible with just CSS
“The other big one is there is no shape-inside() property (yet), so if you’re hoping to put some text inside a shape rather than have it wrap around the outside of a shape, no luck yet.”
A potential (and for now long-winded) workaround would be to have a couple of what I’ll call shaping divs either side of our text.
Thank you for the kind words about the editors and for the feature suggestions!
A small note: when you double-click a polygon edge in the Firefox Shape Path Editor, the newly inserted point does use percentages as default units. You are correct that the CSS Shapes Editor extension for Chrome uses pixels by default. We’ve been thinking about a robust solution where the default units for new points would be inherited from the ones already defined on the shape, but we didn’t get to implementing that yet.
Great suggestion about having the built-in ability to start of from a simple shape. The Chrome extension has this: it’s the “plus” icon next to the “pointer” icon used to trigger the path editor. The Firefox Shape Path Editor does not yet have this feature, but we’re looking to add it soon.