枠画像

要素の周囲に画像を枠として描画するスタイル。絵画を収める額縁のようなイメージ。
要素と枠画像のサイズが異なる場合、枠画像の上下左右が伸縮または繰り返されて補間される。

縦横伸縮するポップアップにフレームを付けたい場合などに有効。癖はあるが、知る／知らないとで UX に差が付くほど重要なスタイルと言える。

デモ

注意

• Retina 対応も可能だが、補間アルゴリズムに不具合が発生するかもしれない。
• 旧式の Android ではわずかな隙間ができる。

応用例

See the Pen CSS: Border-Image by Pedro Tavares (@dipscom) on CodePen.