CSSで図形を作るとき、枠線（border）を付けたいと思ったことはありませんか？ 従来の clip-path では図形を切り抜く際に枠線やシャドウが失われてしまい、装飾が難しいという課題がありました。そんな悩みを解決する新しいプロパティ border-shape が登場しました。まだ Chrome でのみサポートされていますが、将来の標準化を見据えて今から押さえておきましょう。本記事では基本から応用まで、具体例を交えて解説します。
border-shape の基本
border-shape は clip-path と似た構文を持ちますが、要素を切り抜くのではなく「変形」することで、border や box-shadow がその形状に追従するようにします。
.shape {
border: 8px solid red;
border-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* ひし形 */
}
これだけでひし形の枠線が完成します。従来は clip-path で作った図形に枠線を付けるのは困難でしたが、これなら簡単です。
2つのシェイプ値を使う
border-shape は1つまたは2つのシェイプ値を受け取れます。2つ使うと、1つ目が外側の境界、2つ目が内側の境界となり、その間の領域に border が描画されます。これを使うと切り抜き（カットアウト）効果が作れます。
.cutout {
border: 8px solid pink;
border-shape: inset(0) circle(50px); /* 四角形の中に円形の切り抜き */
}
このコードを実行すると、四角形の枠線の内側に円形の空白が生まれ、その境界に沿って枠線が描かれます。inset(0) の代わりに circle() を使えば、円形の切り抜きも簡単に作れます。
注意点と制限
- ブラウザサポート: 執筆時点では Chrome のみで動作します。Firefox や Safari ではまだサポートされていないため、本番環境に適用する際は互換性を必ず確認してください。
- border-radius の無効化:
border-shapeを使用するとborder-radiusは無視されます。角丸が必要な場合は、circle()などのシェイプ関数で直接指定します。 - コンテンツのオーバーフロー:
border-shapeは要素の枠線と背景を変形しますが、内部のコンテンツは元の四角形の領域を維持します。コンテンツが枠線の外にはみ出す可能性があるため、overflowプロパティで調整が必要です。
実践テクニック: ブレイクアウト効果
border-shape を使うと、画面全体に背景が広がるブレイクアウト効果を簡単に実現できます。
.breakout {
border-shape: inset(0 -100vw) circle(0);
border-color: pink;
}
このコードは、要素の背景が左右の画面端まで広がる効果を作ります。従来は margin や width を駆使する面倒な方法が必要でしたが、これなら一行で解決です。
まとめ
border-shape は CSS での図形表現に革命をもたらす可能性を秘めています。枠線付き図形、カットアウト、ブレイクアウト効果、アニメーションまで可能になり、これまで難しかったデザインを簡単に実装できます。まだブラウザサポートは限定的ですが、標準化されたときのために今から慣れておくと良いでしょう。
次のステップとしては、shape() 関数を深く学ぶことをお勧めします。border-shape と組み合わせることで、可能性は無限に広がります。また、顧客を真に理解する4段階UXリサーチで学んだように、新しい技術を導入する際はユーザー視点での価値を常に考えることが大切です。
合わせて読みたい記事: