What are CSS Shapes?
The CSS Shapes specification describes geometric shapes for us in CSS. In Level 1 of the specification, now at Candidate Recommendation Status, shapes can be applied to floated elements only. An example is the easiest way to get started..shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }In the above example we add this class to an image. We float the image left, give it a width, height and a margin then use the property shape-outside to curve the text around the circle.


Basic shapes
The shape-outside property used in our simple example can take various values. The first possibilities are referred to as “basic shapes” in the specification. These basic shapes are functions:- inset()
- circle()
- ellipse()
- polygon()
inset()
The inset() function is for defining shapes on rectangular elements, which float does for us and in most cases is adequate. There may be times when the additional control comes in useful. The inset() function can be passed four position arguments which are offsets inwards from the element’s edges, plus a border-radius for the rectangular shape, preceded by the keyword ‘round’. inset(top right bottom left round border-radius); for example:inset(10px 20px 10px 20px round 50%);The arguments for the inset follow the same shorthand as margin, so if you want an inset of 20 pixels all around the element you could use:
inset(10px round 50%);In my example I have used an image that has a lot of white space below it. If I just float the image I have a big gap underneath. By using the inset value I can inset the bottom of the shape, allowing the text to flow closer to it.
.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

circle()
We met the circle basic shape at the beginning of this article. The circle() shape value is fully described in the specification as:circle(r at cx cy);The value r is the radius of the circle, 50% being half the element’s width. The other two values are x and y coordinates for the circle centre, this essentially allows you to push the circle around. In my example I used:
circle(50%);I could also have described this as:
circle(50% at 50% 50%);In my example page on Github I have an icon, it has a transparent background and to make the examples clearer I have given the image a grey background color, padding, a border and a margin:
.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }It is set to float left, and if we don’t apply any shapes to this image it looks like the screenshot below.

.circle { shape-outside: circle(50%); }

.circle-coords { shape-outside: circle(50% at 30% 30%); }

- content-box
- padding-box
- border-box
- margin-box
shape-outside: circle(50%) margin-box;Is the same as writing:
shape-outside: circle(50%);As you would expect margin-box is constrained by the element’s margin, border-box by the border, padding-box by the padding and content-box will be constrained by the actual content. Read this article for a full explanation of how reference boxes work in the context of CSS Shapes. If we take a look at my example page using the Show Shapes bookmarklet you can see clearly how this works.

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

ellipse()
Many shapes can be curved around by using the ellipse value, even if they are not obviously an ellipse. Using ellipse is very much like using circle, except that instead of one value for the radius, you need to specify the x and y radius separately.shape-outside(rx ry at cx cy);The radius values can be absolute or relative units and also keywords closest-side and farthest-side. These keywords are also valid for use as the radius of a circle although less useful in practice. My example with no shape applied is simply floated.
.shape { float: left; width: 200px; height: 200px; margin: 20px; }I can use the radius keywords:
.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }Which creates a circle on this element as the actual dimensions of the image are square.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

polygon()
If you need really fine control when drawing your shape the polygon value will help. You can specify as many co-ordinates as you need for your shape — with a minimum of three. Each pair of coordinates is separated by a comma..shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }Using the Show Shapes bookmarklet you can see the shape.

Shapes from an image
Another way to create a shape is to give an image as the value for shape-outside. That image needs to have an alpha channel. (You can find out more about how to save your images if using Photoshop on the Adobe Web Platform blog.) You can use an image already on your page or pass in an image from elsewhere. Note: The image you use must be CORS Compatible. The first time I played with this I couldn’t understand why my shape wasn’t working when I tested locally. Find out more here. My example page contains three different uses of this technique. In the first example I have an image on my page and I also pass that image in as the URL to create the shape from..shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }The shape-image-threshold defines the threshold of opacity we should use, from 0 which is fully transparent to 1 which is fully opaque.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }


.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Shapes from the reference box
You can also give a value to the shape-outside property which is the reference box we discussed earlier when looking at the circle() value. For example:.circle-margin-box { shape-outside: margin-box; }This is useful where you have used border-radius to add a rounded border to an element and simply want the content to curve around that border. As in this example.

Browser support
One of the nice things about CSS Shapes is that, as they have to be applied to a float, they can easily be used as a progressive enhancement for your site. Browsers that do not support Shapes will display the float as you would expect, with a square box around the element. Browsers that do support Shapes will have the shape you specified. You can see a great example of this on the new site for The Web Ahead podcast. On the podcast pages CSS Shapes are used to curve the text around a circular image of the guest. You can see how this looks in Chrome on the left. Firefox (on the right) doesn’t yet support Shapes and so we get the square box around the image.
Resources and further reading
In this article I’ve detailed the main things you might need to know to start using CSS Shapes in your sites today. For more information, including information on what is coming in the Level 2 specification have a look at the following resources.- The CSS Shapes Specification
- Getting Started with CSS Shapes on HTML5 Rocks
- CSS Shapes 101 on A List Apart
- Why you should be excited about CSS Shapes
Rachel Andrew
Rachel Andrew is a web developer, writer and speaker from the UK. She has been working on the web since 1996 and is co-founder of Perch CMS. Rachel writes about business and technology on her site at rachelandrew.co.uk and can be found on Twitter @rachelandrew.
Read Next
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…
30 Obsolete Technologies that will Perplex Post-2000s Kids
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…