Tutorial

Magazine-Style Shapes Around Floated Elements in CSS With shape-outside

Published on September 3, 2020

Magazine-Style Shapes Around Floated Elements in CSS With shape-outside

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.

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:

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:

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.

Learn more about our products

About the authors

Alligator.io

author

Andy Hattemer

editor

Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.

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.