The web doesn’t have to be boxy. Historically, every element in a page is rendered as a rectangle of some kind, but it doesn’t have to be this way. With CSS Shapes you can create web layouts every bit as stylish as print magazines, but with all of the advantages of the web.

CSS Shapes let your web designs break out of the rectangular grid. All of those classic magazine design elements like non-rectangular text flow and shaped images can be yours, for the low low price of using a new CSS standard. Text can flow, images can be rounded, even just a few non-parallel lines can make your site stand out and make your brand distinctive. Standing out is the biggest challenge most sites face today. Shapes can help!

Image by Sara Soueidan

The Standard

The shape of your elements can be controlled with just two CSS properties: shape-outside and clip-path.

The shape-outside property changes the way content flows outside of a floated DOM element. It affects layout, not drawing. The clip-path property changes the clipping boundary of how the DOM element is drawn. It affects drawing, not layout.

The clip-path and shape-outside properties.

Because these two properties are separate, you can use one, or both, or none — to get just exactly the effect you are looking for. The good news is that both of these use the same basic-shape syntax.

Want to clip your image to be in a circle? Just use clip-path: circle(50%). Want to make text wrap around your image as if it were a circle, just use shape-outside: circle(50%). The shape syntax supports rectangles, circles, ellipses, and full polygons. Of course, manually positioning polygons with numbers is slow and painful. Fortunately there is a better way.

The Shape Path Editor

With the Shape Path Editor in Firefox 62, you can visually edit the shape directly from the CSS inspector. Open your page in Firefox, and use Firefox Developer Tools to select the element whose shape you want to modify. Once you select the element there will be a little icon next to the shape-outside and clip-path properties if you have used one of them. If not, add shape-outside and clip-path to that element first. Click on that little icon to start the visual editor. Then you can directly manipulate the shape with your mouse.

Image courtesy of placekitten, text courtesy of catipsum.

Open the Inspector and select the element you want to modify:

Click the icon next to clip-path or shape-outside. If the element doesn’t have one of these properties, add it, then select it.

Edit the clip path:

Edit the outside shape:

Check out this live demo on glitch.

To learn more about how to use the CSS Shape Editor read the full documentation.

Progressive Enhancement

CSS shapes are here and they work today in most browsers, and most importantly they degrade gracefully. Readers with current browsers will get a beautiful experience and readers with non-compliant browsers will never know they are missing anything.

Stunning Examples

Here are just a few examples of the amazing layouts you can do with CSS Shapes:

Page layout text effects with clip-path:

via Mandy Michael

Plants and background effect using clip-path:

via Aga Naplocha

Minion using shape-outside:

via Nicholas Evans

Break out of the Box

Shapes on the web are here today, thanks to shape-outside and clip-path. Using the Firefox Shape Path Editor makes them even easier to use.

How will you make your website break out of the box? Let us know how you’re using Shapes.