hero

Shapes

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.

See the Pen Image Caption CSS Shapes Demo by Adobe Web Platform (@adobe) on CodePen.

Wrapping Around a Curve
Content flowing around an image curve. You can use a shapes-enabled browser to view this demo on CodePen.

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?

Internet Explorer Chrome Firefox Safari Opera iOS Android
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?