Tutorial
Magazine-Style Shapes Around Floated Elements in CSS With shape-outside
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Introduction
Part of CSS Shapes module 1, shape-outside is an interesting property that makes it easy to set a shape for the wrapping of text around a floated element. For example, if a floated element is an image with a lot of white-space or if it has a different border radius, the value of shape-outside comes into play to define how text around it will wrap.
Using shape-outside allows to create page layouts that approach those that we’re used to see in magazines. It can be a nice progressive enhancement for supporting browsers and in non-supporting browsers the property is simply ignored.
The value for shape-outside can be a keyword, a shape function or an URL to an image. Let’s explore each option briefly:
Shape Keywords
You can set shape-outside to a value like margin-box, padding-box, content-box or border-box. This makes it easy to have text that follows the border radius value applied to the floated element:
margin-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus euismod tempor. Ut ac condimentum neque. Vivamus vel tristique lacus. Aenean volutpat volutpat diam, eu volutpat mauris. Donec interdum tempor risus. Maecenas eu tincidunt tortor. Donec tincidunt turpis enim, ac bibendum lorem blandit at. Pellentesque ullamcorper ex sit amet mauris dictum varius.
img.shape1 {
float: left;
margin-right: 2rem;
border-radius: 0% 90%;
-webkit-shape-outside: margin-box;
shape-outside: margin-box;
}
The difference between the margin, padding, content and border keywords is in where the browser sets the “boundary” of the shape. For example, setting border-box will force text to flow exactly around the outside edge of the border of the element.
Shape Functions
shape-outside can also take one of four possible shape functions: circle(), polygon(), ellipse() or inset().
Circle
Here’s an example with an image that’s floated to the left and that has a border-radius of 50%:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu nec lacus venenatis pulvinar. Cras lacinia turpis diam, at euismod velit auctor sed. Curabitur bibendum sodales tortor et lobortis. Cras vitae vulputate ex. Vivamus in faucibus mi. Aliquam auctor sem ac lobortis volutpat. Integer fringilla lacus suscipit nisl blandit, sed efficitur elit ultricies. Curabitur ac laoreet ligula. Nullam et enim ut risus commodo tempor. Vivamus dictum sit amet erat vitae dapibus.
img.shape2 {
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside: circle();
shape-outside: circle();
}
The circle() shape function can also take a radius and a position value:
/* Circle width a 40% radius and positioned at 20% 60% */
shape-outside: circle(40% at 20% 60%);
Ellipse
In the case of the ellipse() shape function, the syntax is similar to circle’s, except that a X-radius and Y-radius is provided:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.
.shape3 {
float: right;
width: 230px;
height: 140px;
margin-left: 2rem;
border-radius: 50%;
-webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);
shape-outside: ellipse(100px 55px at 38.7% 52.25%);
object-fit: cover;
}
Here we also used object-fit to ensure that the image keeps its aspect ratio even though we squished the dimensions.
Polygon
You can create all kinds of interesting shapes using the polygon() color function. It’s quite complicated to figure out the proper dimmensions however, so for more complex shapes you’ll probably want to use a tool like this great CSS Shapes Editor Chrome Extension.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.
img.shape4 {
float: left;
-webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
-webkit-shape-margin: .7rem;
shape-margin: .7rem;
}
Here notice the use of the shape-margin property, to nudge the whole shape slightly.
Inset
With the inset() shape function, you proved inset values for the top, right, bottom and left positions:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.
img.shape5 {
float: right;
-webkit-shape-outside: inset(50px 0 50px 55px);
shape-outside: inset(50px 0 50px 55px);
}
URL
We can provide an image via an URL, and the opaque parts of the image with create the shape:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.
img.shape6 {
float: left;
shape-outside: url("/shape.png");
}
Here’s what our transparent png (shape.png) image looks like:
Browser Compatibility: As of 2020, 94% of browsers worldwide support the shape-outside property. The only browser that is completely lacking support is Internet Explorer 11.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
editor
Community Builder
Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
