CSS Shapes

Picture a magazine article where the text elegantly wraps around a circular photo instead of just stopping at a rectangular box. That flowing, custom-shaped wrap is exactly what the CSS Shapes module makes possible on the web. Normally, floated content wraps in a plain rectangle, no matter what shape the floated element visually is. The shape-outside property changes that: it defines a custom geometry, like a circle or a polygon, that surrounding inline content (mostly text) flows around instead. This is a subtle but genuinely delightful effect for editorial-style layouts on a site like cookiescursor.com, giving text columns a more organic, magazine-like feel.

In this page:

What Is CSS Shapes?
shape-outside with Basic Shapes
shape-margin
Wrapping Text Around a Circle
shape-outside with an Image

What Is CSS Shapes?

The CSS Shapes module lets floated content influence the wrap of surrounding inline content using a custom geometric shape, instead of the plain rectangular wrap browsers use by default.

Note: Shapes are a great fit for editorial or article layouts on cookiescursor.com where a photo or icon should feel integrated into the flow of text.

Warning: shape-outside has no visible effect unless the element it's applied to is also floated.

Example: What Is CSS Shapes?

css

<style>
img {
  float: left;
  shape-outside: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Text wraps around a custom shape, not a plain rectangle</p>

shape-outside with Basic Shapes

shape-outside accepts basic shape functions like circle(), ellipse(), and polygon(), each defining the wrap boundary with the same syntax used by clip-path. Each shape function accepts the same coordinate syntax whether it's used for shape-outside or for clipping with clip-path.

Note: If you already know clip-path's basic shape syntax, shape-outside uses the exact same functions, so the skills transfer directly.

Warning: A shape and its element's visible appearance are two separate things; shape-outside doesn't clip anything visually on its own.

Example: shape-outside with Basic Shapes

css

<style>
.icon {
  float: left;
  width: 150px;
  height: 150px;
  background: coral;
  shape-outside: polygon(0 0, 100% 0, 0 100%);
}
</style>
<div class="icon"></div>
<p>Wraps around the polygon boundary</p>

shape-margin

shape-margin adds space between the shape's edge and the content wrapping around it, similar in spirit to how ordinary margin adds space around a regular box. Without shape-margin, wrapped text can end up crammed right against the edge of the shape with no breathing room.

Note: A small shape-margin, around 8px to 16px, usually keeps wrapped text from feeling too tightly hugged against a curved edge.

Warning: shape-margin only affects the wrap distance, it doesn't change the shape's own size or position.

Example: shape-margin

css

<style>
img {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 16px;
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Extra breathing room between the shape and the wrapped text</p>

Wrapping Text Around a Circle

A circular shape-outside is one of the most common uses of CSS Shapes, giving a rounded photo or icon a natural text wrap that plain floats can't achieve on their own. Combined with float, this creates a visually striking layout that's difficult to achieve with a plain rectangular box.

Note: Pair shape-outside: circle(50%) with a matching border-radius: 50% so the visual shape and the wrap shape line up perfectly.

Warning: If the shape and the visible element don't match (like a square image with a circular shape-outside), text will wrap around invisible empty space.

Example: Wrapping Text Around a Circle

css

<style>
img {
  float: left;
  shape-outside: circle(50%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
</style>
<img src="https://placehold.co/150x150" alt="Round photo">
<p>Text wraps around the round photo naturally</p>

shape-outside with an Image

shape-outside can also derive its shape directly from an image's alpha channel, meaning the wrap follows the actual transparent and opaque areas of a PNG, rather than a hand-written shape function.

Note: Image-based shapes work best with images that have a genuinely transparent background around an irregular subject, like a logo or icon cutout.

Warning: Image-derived shapes require the image to load successfully first; until then, the browser falls back to a plain rectangular wrap.

Example: shape-outside with an Image

css

<style>
img {
  float: left;
  shape-outside: url('icon.png');
}
</style>
<img src="icon.png" alt="Shape follows the image's transparent areas">
<p>Wraps around the actual opaque pixels</p>

Common Mistakes

Expecting shape-outside to work without float set on the same element, it only has an effect on floated elements.
Confusing shape-outside (which affects how text wraps) with clip-path (which affects what's visually rendered).
Forgetting shape-margin, which leaves wrapped text sitting uncomfortably close to the shape's edge.

Chapter Summary

shape-outside changes how inline content wraps around a floated element, using a custom shape instead of a plain rectangle.
Basic shapes like circle(), ellipse(), and polygon() define the wrap geometry directly in CSS.
shape-margin adds breathing room between the shape's edge and the text wrapping around it.

Browser Support

CSS Shapes with basic shape functions are supported by all modern browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Clip Path Next Lesson → CSS Scroll Snap