CSS Shapes – Non‑Rectangular Layout

The shape-outside property lets text flow around a custom shape.

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

---

Example: Circular image with text wrap

<img src="avatar.jpg" alt="" class="floating" />
<p>Lorem ipsum…</p>