shape-outside | CSS-Tricks

The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon:
It’s important to note that this property will only work on floated elements for now, although this is likely to change in the future. The shape-outside property can also be manipulated with transitions or animations.
The following values identify which reference of the box model should be used for positioning the shape within:
These values should be appended to the end, for instance: shape-outside: circle(50% at 0 0) padding-box. By default the margin-box reference will be used.
The ellipse() function requires the radii values for the x, y axis of the ellipse followed by the coordinates to position the center of the shape within its bounding box. For instance the example above will position the center of the ellipse in the vertical and horizontal center of the .element div:
Although the demo above may suggest that we’re changing the shape of the div itself, if we add borders and a background-image we’ll find that the bounding box is in fact still rectangular:
It might be better to think of it this way: with the shape-outside property we’re changing the relationship of other elements around an element, not the geometry of the element itself. To fix that we’ll need to use shape-outside alongside the clip-path() property, such as in this example:
This function creates a circle, and in the code example above it will create a circle with a radius that is half the height and width of .element. The circle() function can also use the same syntax for positioning the shape within.
In this instance, we have two floated images, one on either side of a block of text. Since both images have the shape-outside property set then the text beneath will avoid those two floats.
It’s also possible to set the shape-image-threshold property which will inform the browser which pixels, depending on their transparency, should create the shape. For example:
In this example the only pixels that will create the shape must have 50% transparency and above. Values from 0.0 (transparent) to 1.0 (opaque) are valid.
This function creates any shape that has three or more vertices, for example:
It’s important to note that if this property is going to be animated it requires the same number of vertices when you declare the animated state:
inset() is a function for making rectangular shapes, it takes five parameters but the fifth, for border-radius is optional. The other arguments are offsets inwards from edge of .element:
Above we have an element that is 200px wide by 200px tall and we’re offsetting the shape within to 50px in every direction except the left side. This way the text will wrap above the shape even though the div extends to the top.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Any idea when FF will be supporting shape-outside ?
This feature is implemented behind the preference layout.css.shape-outside.enabled, defaulting to false, since Firefox 53.
It’s just been enabled in Nightly Builds,
CSS shape-outside enabled in Firefox Nightly. CSS Shapes Editor in Firefox DevTools coming along well. pic.twitter.com/IOh4aElhJx
— Razvan Caliman (@razvancaliman) April 25, 2018
Hello, is there a way to use shape-outside. circle property with grid? I have designed page using grid layout but i want to wrape text around an image just like using float but i know floats doesnt work with grid. how do you guys reach that result with grid? thanks
Hi! Awsome tricks,! I’ve used some on my website. If possible could you point me to any guide that does the same for a video instead of an image?
const float = { shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px), width: 10, height: 10, shape-margin: 10 };
on chrome it’s not working with url(png path)?
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
Copy and paste this code: micuno *
Leave this field empty
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →