Widely available YES。全主要ブラウザで対応済み。雑誌風レイアウトや装飾的なテキスト回り込みに有効。
レイアウト Widely available

shape-outside

通常のフロートではテキストは矩形に沿って回り込む。shape-outside を使うと、円（circle()）、楕円（ellipse()）、多角形（polygon()）、画像のアルファチャネルに沿ったテキストの回り込みが可能になる。雑誌のような洗練されたテキストレイアウトを CSS のみで実現できる。

レイアウトテキスト回り込み

概要

通常のフロートではテキストは矩形に沿って回り込む。shape-outside を使うと、円（circle()）、楕円（ellipse()）、多角形（polygon()）、画像のアルファチャネルに沿ったテキストの回り込みが可能になる。雑誌のような洗練されたテキストレイアウトを CSS のみで実現できる。

対応ブラウザ

デスクトップ

Chrome 37+
Edge 79+
Safari 10.1+
Firefox 62+

モバイル

Chrome Android 37+
Safari iOS 10.3+
Firefox Android 62+

基本構文

CSS 
/* 円形の回り込み */
.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 1rem;
}

/* 多角形の回り込み */
.angled {
  float: right;
  width: 300px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

実務での使いどころ

  • 雑誌風テキストレイアウト

    円形の画像にテキストを沿わせて流し、紙媒体のような洗練されたレイアウトを実現する。

  • 画像の形状に沿ったテキスト回り込み

    透過 PNG の形状に合わせてテキストが回り込み、画像とテキストが自然に融合するデザイン。

注意点

  • shape-outside は float が設定された要素でのみ機能する。Flexbox や Grid 内では直接使用できない。
  • 複雑な polygon() の座標指定は手作業では困難。ツールを使って座標を生成するのが実用的。

アクセシビリティ

  • テキストの回り込みは視覚的な演出であり、スクリーンリーダーでは通常のテキスト順で読み上げられる。読み上げ順に問題がないか確認する。

参考リンク