Core Code
Core Code Modern Dev Handbook

Text Wrap Around Shape

Use shape-outside to wrap text around circular images.

Preview

Code

<style>
img{
width:140px;
float:left;
shape-outside:circle(50%);
clip-path:circle(50%);
margin:10px;
}
</style>

<img src="https://via.placeholder.com/140">

<p>
Text flows around the circular image using shape-outside.
This technique creates magazine-style layouts.
</p>

More CSS Image Shapes Examples (8)

example Circular Image Shape open example example Rounded Image Shape open example example Clip Path Circle open example example Clip Path Polygon open example example Triangle Image Shape open example example Ellipse Image Shape open example example Text Wrap Polygon Shape open example example Shape Change on Hover open example