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.
![cssshape_001](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_001.jpg)
![cssshape_002](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_002.jpg)
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); }
![cssshape_003](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_003.jpg)
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.
![cssshape_004](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_0041.jpg)
.circle { shape-outside: circle(50%); }
![cssshape_005](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_005.jpg)
.circle-coords { shape-outside: circle(50% at 30% 30%); }
![cssshape_006](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_006.jpg)
- 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.
![cssshape_007](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_007.jpg)
.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }
![cssshape_008](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/cssshape_008.jpg)
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_001](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/ellipse_001.jpg)
.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }
![ellipse_002](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/ellipse_002.jpg)
.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }
![ellipse_003](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/ellipse_003.jpg)
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.
![ellipse_004](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/ellipse_004.jpg)
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_001](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/shape_001.jpg)
.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }
![shape_002](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/shape_002.jpg)
![shape_003](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/shape_003.jpg)
.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }
![shape_004](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/shape_004.jpg)
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.
![image-box](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/image-box.jpg)
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.![thewebahead](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/03/thewebahead.jpg)
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
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…