CSS Shapes (shape-outside)

With shape-outside, you can wrap inline text around custom shapes instead of simple rectangles. It works on floated elements with a defined size and a transparent area.

1) Circle Shape


.circle{
  float: left;
  shape-outside: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%); /* for visible shape */
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nisi non augue fermentum hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur in nulla ac nunc consequat tristique. Donec tincidunt nisl vel nisi malesuada, vitae egestas orci dictum.

2) Ellipse Shape


.ellipse{
  shape-outside: ellipse(50% 35% at 50% 50%);
  clip-path: ellipse(50% 35% at 50% 50%);
}

Aliquam erat volutpat. Proin dignissim nisl in orci viverra, et tincidunt mi pretium. Maecenas vehicula eros et urna fermentum, sit amet vestibulum odio pretium. Fusce ac magna nec libero tristique tempor. Ut fringilla, justo vitae dapibus scelerisque, nunc libero mattis eros, non suscipit ligula neque at libero.

3) Polygon Shape (Triangle)


.polygon{
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Morbi egestas malesuada nisl, a dictum ligula feugiat vel. Sed tempor purus sed purus scelerisque, eget ultricies urna varius. Sed sed leo eget arcu laoreet posuere. Suspendisse et commodo neque, ac sagittis mauris. Nullam in posuere sapien, nec pulvinar ipsum.

Tips:

  • shape-outside only works on floated elements with explicit width & height.
  • Use clip-path alongside to make the shape visually match the text wrap.
  • Shapes can be circle(), ellipse(), inset(), or polygon().
  • Great for magazine-style layouts or wrapping text around images/avatars.
  • Browser support: Chrome, Safari, Edge. Limited in Firefox (requires clip-path fallback).