By default text wraps around a floated element's rectangle. shape-outside: circle(50%) (on a float) makes text follow a circle, ellipse, polygon, or an image's alpha. It only affects how content flows around the float — pair with clip-path to also clip the visual.
<!doctype html><html><head><meta charset="utf-8">
<style>.c{float:left;width:120px;height:120px;background:#b388ff;border-radius:50%;shape-outside:circle(50%);margin:0 16px 0 0}p{color:#e6e0ff}</style></head><body style="background:#06040d;padding:20px"><div class="c"></div><p>this text follows the curve of the circle beside it instead of wrapping around a boring rectangle, thanks to shape-outside.</p></body></html>