Shape Outside

After discovering the shape-outside property for floated elements, I thought I would give it a try. But I can’t get it to work. I know it’s not widely supported, but it should work in Chrome at least.
On this page I applied an ellipse shape to the figure element containing the picture of the red boat, but it doesn’t appear to have any effect. There must be something simple I’m missing, what is it?


Hi Sam. shape-outside is new to me. Using the inspect element on the figure, there’s definitely an ellipse there. Does it need a border or something?

Yeah, you’ve got your shape there already (it’s bigger than it looks like you’d want).

I have been reading about it here[quote=“jeffreylees, post:3, topic:214524, full:true”]
Yeah, you’ve got your shape there already (it’s bigger than it looks like you’d want)
I see it in Inspect, but it’s not displacing the text. I don’t know why it’s so big, I have it at 100%, or does that mean 100% of its parent or something?

Does the figure need height and width as per the example?

I wouldn’t think it was needed, but then because I’m using % to size the shape, then, probably yes, for the height at least. I’ll try it.

It’s something to do with your parameters. If you just use ellipse() it works, you can see the curvature of the elements around it.


Yeah your #'s in the ellipse function are quite a bit off. Do you know what those values stand for? They are to do with the shapes size, and where in the container it generates.


Tried with fixed px sizes and no different.

I’ll try that.

And remember that (as far as I understand it) your shape only exists within its bounding box (re: that height and width you were talking about?) So if you have a huge ellipse, but the box is small, nothing will be effected by it.


It’s working with no params, thanks Jeff.

It just dawned on me, those are radii, not diameter :blush:


It all makes sense now. If the shape is bigger than the container, it does nothing. If you want a bigger shape, just add padding to the element.
Though now I see it working, I’m not sure I like it. But just wanted to try it out.


Yes your 60% makes the ellipse stretch out of the actual float with and therefore the repelled text hits a straight edge and appears not to work. A setting of 50% would give you a much tighter fit.


shape-outside: ellipse(50% 50% at 50% 50%);


Yes, filling the container was what I wanted. That’s why I put 100% 100% to begin with, assuming that to be height and width, as opposed to reading things properly and seeing the params were for radii. But using no params () as Jeff suggested means it defaults to filling the container anyway.
I added some padding to grow the shape beyond its size, because the text looked horrible wrapping so close to the image.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.