図形に枠線を付けるのが、なぜこんなに面倒だったのか
CSS で図形を作ること自体は、もう珍しくありません。clip-path や mask を使えば、星型でも雫型でも波線でも作れます。ところが、そこに 「枠線を付けたい」 と思った瞬間から状況が一変します。
clip-path は要素全体を切り抜くため、枠線も box-shadow も一緒に切り落とされてしまいます。そのため従来は filter: drop-shadow() で誤魔化す、SVG に逃げる、::before / ::after で重ねる、といった回避策が定番でした。
そこで登場したのが border-shape です。名前のとおり「枠線の形」を定義するプロパティで、同時期に追加された shape() 関数や corner-shape と組み合わせることで、CSS 図形まわりの表現力が一段上がります。
なお
border-shapeは執筆時点で Chromium 系（Chrome / Edge）のみ の対応です。本番投入はまだ早いですが、今のうちに仕様を把握しておくと標準化後にそのまま活かせます。
根拠資料: CSS-Tricks - Get Ready for the Powerful CSS border-shape Property
基本：clip-path を border-shape に置き換えるだけ
シンプルな使い方
border-shape は clip-path と 同じ値の構文 を採用しています。polygon()、circle()、inset()、そして新しい shape() までそのまま使えます。つまり、プロパティ名を置き換えるだけで移行できます。
.shape {
/* 従来のコード */
/* clip-path: polygon(50% 0, 100% 100%, 0 100%); */
/* 新しいコード */
border-shape: polygon(50% 0, 100% 100%, 0 100%);
border: 8px solid #ff4d6d;
}
これだけで、border が 図形の輪郭に沿って 描画されます。clip-path では不可能だった挙動です。
2つの shape 値 = 切り抜きモード
border-shape の真価は 2つの shape 値を受け取れる 点にあります。1つ目が外側の境界、2つ目が内側の境界となり、その間の領域が枠線として塗られます。
.box {
/* 外側は長方形、内側は円 → 円形の切り抜き効果 */
border-shape: inset(0) circle(50px);
border: 8px solid pink;
}
inset(0) の代わりに circle() を指定すれば、円の中に図形が収まるような表現も可能です。border-radius: 50% と似て見えますが、border-shape が有効な要素では border-radius は無視されます。そもそも角が存在しないためです。
ブレイクアウト背景のテクニック
外側の shape を画面外まで広げ、内側を 0 にすると、背景が画面端まで伸びる効果が作れます。
.box {
border-shape: inset(0 -100vw) circle(0);
border: 40px solid pink;
}
border が実質的に背景として機能しているわけです。従来は ::before で画面外まで押し出すハックが必要でしたが、これなら1行で済みます。
アニメーションも可能
border-shape は アニメーション可能 です。方法は2つあります。
border-widthのアニメーション — リビール（出現）効果を作れます。- shape 値そのもののアニメーション — 2つの図形間を滑らかに補間します。
.blob {
border-shape: shape(from 50% 0, curve to 100% 50%, ...);
transition: border-shape 0.4s ease;
}
.blob:hover {
border-shape: shape(from 50% 10%, curve to 90% 50%, ...);
}
複雑なブロブ（blob）形状も、clip-path を border-shape に置き換えるだけで、枠線や影を保ったままアニメーションできます。
shape() 関数の構文に不慣れな場合は、SVG の path 構文とほぼ同じだと捉えてください。SVG 図形をそのまま移植する感覚で扱えます。
実務で使う際の注意点
1. ブラウザ対応はまだ限定的
執筆時点では Chromium 系のみ の対応です。Firefox / Safari は未対応です。本番投入する場合は必ず @supports でガードしてください。
@supports (border-shape: inset(0)) {
.shape {
border-shape: polygon(...);
border: 4px solid red;
}
}
2. コンテンツは図形の外にはみ出す
border-shape が図形に沿わせるのは 要素の装飾（枠線、影、アウトライン）のみ です。内部のテキストや画像などのコンテンツは、従来どおり元の長方形ボックスを基準に配置されます。つまり、図形の外にコンテンツがはみ出す可能性があります。
- コンテンツを切り抜きたい場合は
overflow: hiddenを併用 - コンテンツを上に重ねたい場合はそのまま（むしろこれがブレイクアウト効果の原理）
3. border-radius は無視される
border-shape が適用された要素では border-radius は機能しません。角そのものが存在しないため、理屈としては当然ですが、既存コードを移行する際に混乱しやすいポイントです。
4. 日本国内の開発現場での適用文脈
国内の受託開発では、依然として古いブラウザ対応やデザインカンプの再現性が重視され、「枠線付きの図形」は SVG や画像で処理するのが定石です。border-shape はその定石を CSS レイヤーで置き換える可能性を秘めていますが、まずはプロトタイプ、社内ツール、管理画面 などブラウザを統制できる環境で試すのが現実的です。公開サービスでは @supports によるフォールバックを前提に設計してください。
5. パフォーマンス面
複雑な shape() 値にアニメーションを適用すると、リペイントコストが増大する可能性があります。特に複数要素に同時適用する場合は will-change: border-shape を乱用せず、実際にプロファイリングしたうえで適用してください。
まとめ：今学んでおけば2年後が楽になります
border-shape を一言で表すなら 「clip-path の枠線問題を解決した進化形プロパティ」 です。
clip-pathと同じように図形を作りつつ、border/box-shadow/outlineが図形に追従する- 2つの shape 値を渡せば、切り抜き・フレーム効果まで表現可能
border-widthまたは shape 値そのものをアニメーションできる- ただし現状は Chrome 系のみ対応 →
@supports必須
すぐに本番投入するのは早いですが、今のうちに shape() 構文に慣れておけば、標準化が進んだタイミングで即座に実務投入できます。特に ローダー、装飾用フレーム、ヒーローセクションのブレイクアウト背景 などで真価を発揮します。
次のステップ
shape()関数の構文を先に習得する（SVG path 構文とほぼ同じ）corner-shapeプロパティと組み合わせて角をカスタマイズ@supportsによるフォールバック戦略の設計（SVG → CSS の段階的強化）- アニメーションのパフォーマンスプロファイリング