CSS border-shapeプロパティの全容、装飾が形状に追従する新機能
shape() と corner-shape の復習
border-shape を理解するには、まず土台となる shape() 関数と corner-shape プロパティを押さえておくとスムーズだ。いずれも CSS で形状を扱うための新しい道具であり、特に shape() は 2026 年に Baseline（主要ブラウザで広く使える状態）に到達したばかりである。
shape() 関数の基本
shape() は SVG のパス構文を CSS に取り込む関数だ。clip-path や offset-path の値として使う。従来の path() に比べて CSS ネイティブな記述ができ、直感的に複雑な図形を定義できる。たとえばハート形、星形、波線など、従来は polygon() などで苦労していた形状も、少ないコードで表現可能になった。
CSS-Tricks の記事では、shape() に関する全4回のシリーズ解説と、SVG パスを shape() に変換するオンラインコンバーターも公開されている。これにより、既存の SVG 図形を CSS 形状として手軽に流用できるようになった。
corner-shape プロパティの概要
corner-shape は要素の角の形状を変えるプロパティだ。border-radius と組み合わせて使う。値には round（丸）、scoop（えぐり）、bevel（面取り）、notch（切り欠き）、squircle（超楕円）といったキーワードを指定する。squircle は iOS のアイコンなどで見られる、丸みを帯びつつ四角さも残した独特の曲線だ。
corner-shape は単なる角の整形にとどまらず、三角形や菱形、六角形といった CSS のみの図形作成にも使える。何より重要なのは、角を変形させても border や box-shadow がその形状に追従することだ。これこそが border-shape の布石となる考え方である。
border-shape の基礎：clip-path との違い
border-shape の構文と基本動作
border-shape は要素の形状を定義するが、clip-path とは根本的な動作が異なる。clip-path は要素を「切り抜く」（クリッピング）。その結果、border や box-shadow などの装飾も一緒に切り取られ、形状に沿わない。一方、border-shape は要素を「変形させる」（シェイピング）。装飾は新しい形状に沿って描画される。
構文は clip-path とほぼ同じで、shape()、polygon()、circle()、inset() などを受け取る。さらに、2つの値を指定する「フィルモード」も用意されている。最初の値が外側の境界、2番目の値が内側の境界となり、その間を border で塗りつぶす動きだ。
/* 1 値のストロークモード：border が形状をなぞる */
.shape {
border: 8px solid #1976d2;
border-shape: shape("M ...");
}
/* 2 値のフィルモード：境界の間を border で塗る */
.cutout {
border: 12px solid #e74c3c;
border-shape: inset(0) shape("M ...");
}装飾が追従する仕組みを図で見る
このデモは概念を視覚化したイメージだ。実際の border-shape は Chrome で確認できる。clip-path と異なり、星形の頂点やくぼみにぴったり沿った border が手軽に得られる。
border-shape のもう一つの利点は、border-radius を考慮する必要がない点だ。要素が丸められた矩形でなくなれば、角丸の概念自体が不要になる。代わりに形状そのもので角の挙動を制御できる。
ボーダーだけの形状を作る（Border-Only Shapes）
border-shape のわかりやすいユースケースが「輪郭だけの形状」だ。要素の背景を透明にし、border だけを設定するだけで、ハートや星、花、波線といったアウトライン図形を CSS のみで描ける。
.border-only {
background: transparent;
border: 8px solid #e74c3c;
border-shape: shape("..."); /* ハート形などのパス */
}この例も概念のイメージである。実際の border-shape なら、頂点や曲線がより精密に再現される。従来は複数の疑似要素や複雑な box-shadow の重ね合わせが必要だった表現を、数行の CSS で実現できるのが大きな魅力だ。
切り抜き形状とレイアウトの応用
2つの形状値で作る切り抜き
border-shape に inset(0) と任意の形状を組み合わせると、矩形の内側に図形の穴が開いたような「切り抜き」デザインが作れる。これはフィルモードと呼ばれ、外側形状と内側形状の差分を border の領域として塗りつぶす。
.cutout {
border: 12px solid #1976d2;
border-shape: inset(0) circle();
}上図は border-shape のフィルモードを静的に再現したものだ。実際には、border-color や border-width を変えるだけで、動的に切り抜き形状の装飾を調整できる。
ハートや星を使った複合形状
円だけでなく、shape() で定義したハートや星形を内側形状に指定すれば、さらに凝ったデザインが可能だ。たとえば、矩形のカードの中にハート形の窓が空いたような装飾、ポリゴン型のフレームに星形が浮かぶ背景など、CSS だけで容易に作れるようになる。
はみ出し装飾と部分装飾
border-shape は要素の境界を超えて装飾を拡張することもできる。形状を要素の外側に大きく取れば、背景が画面幅いっぱいに広がるブレイクアウト効果を border の太さだけで演出できるのだ。
.breakout {
border: 40px solid #ff9800;
border-shape: inset(0 -100vw) circle(0);
}border-shape では border を画面外まで伸ばせるため、従来の CSS グリッドの「ブレイクアウト」テクニックよりはるかに直感的に、セクションの背景を拡張できる。
テキストに寄り添う部分装飾
shape() 関数の緻密なパス指定と組み合わせれば、テキストの特定の単語にだけ下線を引く、見出しの左端にのみ斜めの背景を付ける、といった部分装飾も可能になる。border-shape は要素全体を変形しつつ、装飾の範囲を自由にコントロールできるため、デザインの表現力が格段に向上する。
アニメーションと次の一手
border-shape はアニメーションもサポートしている。形状を動的に変えたり、border-width を操作したりすることで、多彩なインタラクションを追加できる。
3コマで見る形状アニメーション
以下のデモは、ホバーで円が星形に変化するアニメーションを静的に示したものだ。実際には約 0.5 〜 1.5 秒かけて連続的に変化する。
この変化を border-shape 上で行えば、border や影も一緒に変形するため、よりリッチなエフェクトが可能になる。他にも、border-width を 0 から太くすることで、ホバー時に形状が浮かび上がるリビール効果も実装できる。
実践的なテクニック集
CSS-Tricks の記事では、以下のような応用例も紹介されていた。
- ナビゲーションメニューで、手描き風の下線がホバーアイテムにスライドする
- コンテンツボックスの周囲を電気が走るようなフレームで囲む（タッチデバイスでも安全）
- border のみで構成されたローディングスピナー
- ドラッグ可能な円をつなぐ曲線が、距離に応じて伸び縮みする
いずれもこれまでは JavaScript や SVG を駆使しなければ実現が難しかった表現だ。border-shape と shape() を習得すれば、CSS だけで多くの装飾を完結できるようになる。
この記事のポイント
- border-shape は要素の形状を変えつつ、border や box-shadow を形状に追従させるプロパティ
- clip-path と違い、装飾が失われず、輪郭だけの形状や複雑なフレームが容易に作れる
- 2値指定のフィルモードで切り抜き効果、形状を広げてブレイクアウト背景も実現可能
- アニメーションや部分装飾にも対応し、CSS 表現の幅を大きく広げる
- 2026年7月現在 Chrome のみの先行実装だが、今後の標準化と普及に注目
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験