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

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:

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:

Shape outside 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;
}

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%:

Shape outside circle

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:

Shape outside ellipse

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.

Shape outside polygon

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:

Shape outside inset

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:

Shape outside URL

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:

Shape image


Browser Support

Can I Use css-shapes? Data on support for the css-shapes feature across the major browsers from caniuse.com.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...