📌 What Is shape-outside?

The shape-outside property allows you to define a custom shape that controls how inline content (like text) wraps around a floated element.
Instead of wrapping text around a plain rectangle, you can make it flow around a circle, polygon, or even an image’s alpha channel.
This gives you magazine-style layouts, creative storytelling sections, and dynamic content flow. 📰✨

🧩 Basic Requirements

⚠️ The element using shape-outside must be floated→ float: left; or float: right;
Otherwise, the shape won’t affect text flow.

🧩 Basic Syntax

shape-outside: <basic-shape> | <image> | <shape-box>;

shape-outside: circle(50%);
shape-outside: polygon(0 0, 100% 0, 100% 100%);
shape-outside: url(image.png);
shape-outside: inset(20px);

✔ Shapes include: circle(), ellipse(), inset(), polygon()
✔ Images use their alpha channel to define wrap boundaries
✔ shape-margin adds spacing around the shape

🎯 The shape-outside “Flow Rule”

Text wraps outside the defined shape. If using an image, only non-transparent regions define the shape.

🧪 Example: Circle Text Wrap

.circle {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);  /* Optional: make visual shape match */
  background: url(profile.jpg) center/cover;
}

✔ Perfect for profile pictures in blog layouts
✔ clip-path makes the visible shape match the wrapping shape (recommended)

🧪 Example: Polygon Wrap

.triangle {
  float: right;
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0, 0 100%, 100% 100%);
  background: coral;
}

✔ Text flows around a triangle — great for bold layouts.

🧪 Example: Using Images as Shapes

.mask-shape {
  float: left;
  width: 220px;
  height: 220px;
  shape-outside: url(star.png);
  shape-margin: 10px;
  background: url(star.png) center/contain no-repeat;
}

✔ PNG or SVG with transparency defines how text flows
✔ shape-margin gives breathing room around the star

🎨 Example: Heart-Shaped Text Flow

.heart {
  float: right;
  width: 250px;
  height: 250px;
  shape-outside: path("M50,15 Q25,0 0,30 T50,60 T100,30 Q75,0 50,15 Z");
  clip-path: path("M50,15 Q25,0 0,30 T50,60 T100,30 Q75,0 50,15 Z");
}

✔ Organic shapes
✔ Beautiful for storytelling, magazine layouts, product designs

🧠 shape-margin — Your Best Friend

shape-margin: 20px;

✔ Adds spacing between text and the wrap shape
✔ Prevents text from touching edges

🔥 Advanced Example: Irregular Image Wrap

.irregular {
  float: left;
  width: 300px;
  height: 300px;
  shape-outside: url(tree.png);
  shape-margin: 15px;
  background: url(tree.png) center/cover no-repeat;
}

✔ Text wraps around the non-transparent silhouette of the image
✔ Stunning for nature or artistic layout designs

🌈 Example: Combining clip-path + shape-outside

.combined {
  float: left;
  width: 250px;
  height: 250px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

✔ clip-path controls visible shape
✔ shape-outside controls text flow shape
✔ Together they create perfectly matched visuals

🔧 Browser Support

🛠️ Debugging Tips

🔗 Helpful Tools & Resources