#CSS Shapes

##What is it?

CSS Shapes lets CSS layout go on beyond rectangles.

Everything in traditional CSS layout is a rectangular box. Some properties like border-radius can change the display of that box. But the border display does not affect how content is laid out in and around the box. CSS Shapes are starting to let layout use these and other non-rectangular shapes.

In the first step, CSS Shapes allows you to add a shape to a float. You use the new shape-outside property for this. Content next to the float will flow around the shape. This can be the standard float rectangle. Or it can be the actual shape of a rounded-corner border. Or it can be the alpha contours of an image. Or it can be a polygon you draw yourself.

</img>

Further steps may include wrapping content inside a shape, or adding a shape to an exclusion. Some of the ways shapes are defined is also used in clip-path. Other ways of using shapes will almost certainly be discovered. Ideas for future work are currently being collected in the level 2 specification.

##When can I use it?

11	37	32	7.1	24	8	4.4

CSS Shapes for floats is implemented in WebKit and Blink. It is available in Chrome 37 and Opera 24. It will be available in Safari 8 (and the 7.1 and 6.2 updates). The level 1 specification is a Candidate Recommendation at the W3C, so other browsers are encouraged to implement shapes on floats as soon as they can.

Learn how to enable this feature in popular browsers or you can use our polyfill in unsupported browsers.

##Where can I learn more?

• We have posted several articles on our blog.
• Sara Soueidan has written several articles on shapes.
• Patrick Catanzariti has written a thorough introduction
• If you have a browser with support for CSS Regions, our National Geographic Forest Giant Demo has many compelling uses of CSS Shapes in the context of a magazine article.