CSS-Tricksに、テマニ・アフィフによる新しいCSSプロパティ「border-shape」の解説記事が掲載された。要素を自由な形に象りながら、ボーダーやドロップシャドウ、アウトラインといった装飾をその輪郭に沿わせられる——従来のにはできなかった振る舞いを実現するプロパティである。
肝心なのはとの違いだ。は装飾ごと切り抜いてしまうため、せっかくのボーダーや影が消えてしまう。一方のは要素を「切り抜く」のではなく「象る」。だからハート形やスターバースト、花のような形を、塗りつぶしではなく輪郭線だけで描くことができる。指定できる値はと同じで、直感的に形をつくれる新しい関数も使える。
関連するプロパティとの関係も整理されている。はSVGの記法を用いて、これまでより 素直に形を定義できる関数。は角の表情を・・・・といったキーワードで制御し、しかもボーダーや影を角の形に追従させられる。これらが組み合わさることで、CSSだけで表現できる形の幅が一気に広がる。
実用的なユースケースも豊富だ。四角や円の背景から形を切り抜く「くり抜き」、要素の枠を越えて背景をはみ出させる大胆な演出、下線や角だけのボーダー、斜めのアクセントといった部分装飾。さらに形そのものをアニメーションさせれば、出現エフェクトやホバー時の弾むような動きも表現できる。
現時点でのサポートはChromeのみで、他ブラウザへの対応はこれからだと筆者は断りを添える。とはいえ、画像やSVGに頼らず要素そのものを象れる意味は大きい。日本のWebデザイナーや実装者にとっても、CSSでできることの地図を書き換える、心待ちにしたいプロパティである。
