There are some excellent resources on the CSS property shape-outside that should be studied to understand how it works and how you can use it. This new property now enjoys a lot of browser support and it’s something you can generally apply without worrying about how it looks in non-supported environments, so it’s good to use in production now.

When I started playing around with it I did stumble over a couple of things. I figured I would write down some additional tidbits and tips that aren’t covered explicitly elsewhere. First, do read up on shape-outside on MDN, from the wonderful Sara Soueidan at ListApart and Robin Rendle’s working with shapes article on css-tricks.com. Michelle Barker also has a nice article on experimental layouts using shape-outside, including advice on using inverted shape techniques.

Tips

Floated elements only

Shape-outside can only be applied on floated elements right now, so knowing how floats work is very important to be able to understand how to implement an effect using shape-outside. There are some limitations and quirks that you might bump against. And the way the shape area is implemented might surprise you.

How to get a shape to fill the height of its parent

not with position absolute

One of the first things I’ve tried to implement was a shape that expands along with the content and this proved to be pretty difficult. Shapes can be defined using relative units, but a floated element can’t be given dimensions which respond to the content around it. If you want your shape to be the length of the content it’s supposed to affect, tough luck getting it to expand and shrink in an elegant way. One way to get a floated element to stretch in either direction to match the height of the container’s contents is to use position absolute and set top/bottom/left or right, but position absolute will also destroy the intended behaviour, as the contents won’t flow around it.

probably not with height: 100% either

Setting a proportional height such as height 100% will only work if the height of the container has been set. In most cases this won’t be workable, if you’re working with an unpredictable length of content it’s unlikely you want to set an absolute height on its container element and using a relative height is not enough.

using javascript

I’ve found no way to make a floated element fit its container with css only, so the alternative is some javascript. Here’s an example I wrote that adds height attributes to elements inline. It recalculates automatically when the viewport is resized.

How the shape area relates to the bounding box of the floated element

The shape’s locus of influence sits within the dimensions of the bounding box of the floated element. The shape you define can never expand beyond the dimensions you specify on the floated element. So your shape may have dimensions that are larger than the floated element, that shape will simply clip at the edges of your floated element.

Floats, shape-outside and clipping

A floated element may escape beyond its container (demo). There are different ways to deal with that behaviour. You can force the container to expand to fit the floated element. You do that by setting overflow: hidden on the container. You can also let the float clip, while hiding it by stacking it behind subsequent elements using z-index.

The shape-area does not observe your stacking instructions!

The clipped portion of your shape, i.e. the part that exceeds the container it’s floated in can’t be stacked below other elements. And this can be a bit of a surprise. As text in subsequent elements even outside the container of your floated element may wrap around your shape-area. Here is a demo to demonstrate. For further reading it’s worth reading up on w3.org.

You can use pseudo :before and pseudo :after to created floated elements

The cool thing is that floated elements can be pseudo elements, which in turn can have shape-outside defined on them. That means you won’t have to add a physical element in your markup to insert your shape effect.

You can use a transparent png to define the shape-area

Just note that when you specify the url in your shape-outside property, it’s not actually going to display your image, it’s going to compute the area of the image and redirect words and elements around the resulting shape. To have the image display you have to do so separately.

(Check here if you have issues getting transparent pngs to work as a shape)

Firefox has a very nifty shape editor in its developer tools console

To access it, look at the rules panel while you’ve selected the floated element. For the shape-outside property you’ll see an icon which you can click on. It will highlight the shape in the browser while letting you manipulate the points.

Shape-outside is a revelatory addition to CSS, allowing designers to creatively bend text around shapes and since Firefox version 62 it enjoys over 80% browser support. There are several excellent resources on applying shape-outside but not that many articles demo the ability to use transparent PNGs. I was having trouble getting it to work initially, but there’s a couple of reasons why the effect might not show. Here are some tips:

• Did you check that your element has width/height set?
• Did you apply float to the element?
• Did you double check that the PNG you are using uses transparency?
• Is your PNG much larger than than the element itself?

If the effect still isn’t showing, maybe there is an issue with how the PNG is being fetched. Try replacing the url with a data URI instead and see if that makes a difference. If it now works, there is an issue fetching the PNG from your image url. For that see the notes on CORS and  Shape-outside urls on MDSN.