float でテキストの回り込みを行う際、矩形だけではなく円形や三角形など様々な形に沿ってテキストを回り込ませることができる。
| 値 | 説明 |
| none | 形を指定しない。通常の矩形に沿って回り込む。初期値 |
| circle() | 円形を指定する |
| ellipse() | 楕円を指定する |
| polygon() | 多角形を指定する |
| inset() | 矩形を上下左右からの距離で指定する |
| <image> | イメージで指定する |
<div class="container">
<div class="circle-img">
<img src="###.png" alt="" />
</div>
<p class="text">
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも
やゆよ らりるれろ わゐゑを ん がぎぐげご ざじずぜぞ だぢづでど ばびぶべぼ
ぱぴぷぺぽ ぁぃぅぇぉ っ ゃゅょ アイウエオ カキクケコ サシスセソ タチツテト
ナニヌネノ ハヒフヘホ マミムメモ ヤユヨ ラリルレロ ワヰヱヲ ン ガギグゲゴ
ザジズゼゾ ダヂヅデド バビブベボ パピプペポ ァィゥェォ ッ ャュョ ヴ
</p>
</div>画像とテキストの間に余白を作りたい場合は、テキストではなく画像にmarginを記述する。
.circle-img {
float: left;
width: 200px;
shape-outside: circle(50%);
margin-bottom: 30px;
margin-right: 30px;
shape-outside: ellipse(50px 40px);
shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
shape-outside: inset(0 50px 0 0 round 15px);
}