「トップページの斜めに切れているところ、キャッチコピーだけ差し替えたい」——この依頼が数万円の見積もりになって戻ってきた経験はないでしょうか。理由は、その部分がテキストではなく画像1枚として作られているからです。文字を直すには画像を作り直すことになり、作り直せば元データを持っている制作会社に頼むしかありません。
同じことは、角が切り欠かれたカード、波打った区切り線、リボン状の見出しでも起きます。デザイン上は当たり前に見える形が、実装では長く四角以外はCSSで作れなかったという制約に突き当たってきました。
「形が作れない」ではなく「形が中途半端にしか作れない」
正確に言えば、四角以外の形を作る手段はありました。clip-path を使えば要素を任意の形に切り抜けます。
.section {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}これで見た目上は斜めに切れます。ただし clip-path はマスクです。要素の内容を指定した形で覆い隠しているだけで、要素そのものは四角のままです。この差が実装で効いてきます。
- 枠線（
border）は元の四角に沿って描かれ、切り抜きの外側は消える - 影（
box-shadow）は四角のまま落ちるので、形と影がずれる - キーボード操作時のフォーカスリングも四角のまま出る
- 結果として、影や枠線が要るデザインでは使えず、画像に逃げることになる
3つ目は見落とされがちですが、キーボードで操作する利用者にとっては実害です。押せる場所と光る枠がずれていると、いまどこにいるのか分かりません。装飾の都合でアクセシビリティが落ちる、という交換が起きています。
border-shape は「箱そのもの」を作り替える
ここに対して提案されているのが border-shape です。CSS Borders and Box Decorations Module Level 4 の一部で、要素の境界そのものの形を定義します（border-shape — MDN Web Docs）。
決定的な違いは、背景・border-image・フォーカスの輪郭・box-shadow が、すべて新しい形に追従することです。切り抜きではなく箱の再定義なので、四角を前提にした描画が残りません。
| clip-path | border-shape | |
|---|---|---|
| 仕組み | 要素を形で切り抜く（マスク） | 要素の境界そのものを定義する |
| 枠線 | 元の四角に沿い、はみ出た分は消える | 形に沿って描かれる |
| 影・フォーカスリング | 四角のまま。形とずれる | 形に追従する |
| 画像への逃げ | 影や枠線が要る時点で必要 | 不要になりうる |
形の指定には shape() と path() が使えます。path() は SVG のパス記法をそのまま持ち込むもので単位が px に限られますが、shape() は CSS の記法で書けるため、% や rem が使え、calc() のような計算関数も組み合わせられます（shape() — MDN Web Docs）。可変幅のレイアウトを前提にするなら shape() 側を選ぶことになります。
値を1つ書けば、その形が境界になり、指定した border が輪郭として描かれます。値を2つ書くと、1つ目が外側、2つ目が内側の境界となり、その間が border の色で塗られます。後者は、太さが一定でない枠線を作れるということでもあります。
いつから本番で使えるのか、という現実的な話
ここは正直に書きます。いま本番では使えません。
border-shape はテスト段階で、Chrome Canary 146以降で実験的なウェブプラットフォーム機能のフラグを有効にした場合にのみ試せる状態です。他のブラウザでの実装予定も公表されていません。
参考として、先に入った corner-shape（border-radius で作った角の形を面取りや切り欠き、スクワークルに変えるプロパティ）の状況を見ると、2026年6月時点で Chromium 系のみの対応にとどまり、Baseline には入っていません（Squircles in CSS: corner-shape, superellipse() and Browser Support (2026)）。角の形ですらこの進み方なので、border-shape が全ブラウザで安心して使えるようになるまでには相応の時間がかかると見るべきです。corner-shape で今できる範囲はCSS corner-shape で角の表現を解き放つにまとめています。
なお、border-shape を設定した要素では border-radius は無視され、border-radius を前提とする corner-shape も効かなくなります。将来的に併用しようとして「角丸が効かない」と悩む箇所なので、覚えておく価値があります。
使えない今、やっておくと効くこと
「使えないなら関係ない」で終わらせると、数年後に同じ判断をやり直すことになります。いま手を動かせることは1つあります。
サイトの中で「形のために画像になっている箇所」を数えることです。 具体的には、次のようなものを洗い出します。
- 斜めや波形で区切られたセクションの背景
- 切り欠き・リボン・吹き出しの形をしたカードや見出し
- その中に文字が焼き込まれているもの（ここが最も痛い）
3番に当てはまるものが、更新のたびに費用と時間が発生する箇所です。数えたうえで、更新頻度の高いものだけ先にテキストへ戻す。形が完全に再現できなくても、「文字が直せる」ほうが運用では効きます。
そのうえで、次のリニューアルの要件に「装飾のために文字を画像へ焼き込まない」を1行入れておく。仕様が揃ってきたときに、そのまま置き換えられる作りになっているかどうかで、次の改修費が変わります。CSSの標準機能に寄せるか道具に頼るかの考え方は2026年、Tailwindか標準CSSか、JavaScriptに頼っていた表現をCSSへ戻す例はCSSネイティブカルーセルで扱っています。
自社サイトのどこが画像で作られていて、どこから直せるのか。リニューアルの前に一度棚卸ししたいという場合は、グリームハブのHP制作・リニューアル相談で承っています。要件によって最適な構成は変わるため、個別にお見積りします。お問い合わせからご相談ください。
Sources
- border-shape CSS property — MDN Web Docs
- shape() CSS function — MDN Web Docs
- Get Ready For the Powerful CSS border-shape Property! — CSS-Tricks
- border-shape: the future of the non-rectangular web — una.im
- corner-shape CSS property — MDN Web Docs
- Squircles in CSS: corner-shape, superellipse() and Browser Support (2026) — Squircle.js
