登場し、ボックスのボーダーに画像を表示できるようになりました。自動で当てはめてくれます。3ボーダーに画像を表示させるまずはサンプルを見てください。こんなかんじで、要素のボーダーに画像を適用できます。ボーダー用画像の真ん中の部分を、要素の背景として活かすこともできます。使用している画像は↓コレ。id="sample0"><p>こんなかんじで、要素のボーダーに画像を適用できます。id="fill">ボーダー用画像の真ん中の部分を、要素の背景として活かすこともできます。</p></div>CSSはこちら。使用するプロパティ一覧です。線に画像を使用するためのプロパティborder-image-source使用する画像ファイルのURLを指定border-image-slice画像のスライス(分割位置)を指定border-image-widthボーダー画像の幅を指定これを指定しなければborder-widthと同じになるborder-image-outsetイメージエリアを外側に広げるborder-image-repeatボーダー画像の繰り返しかたを指定border-imageまとめて書くためのショートハンドプロパティでは、プロパティを1つずつ、サンプルで確認していきましょう。以下のサンプルでは、この画像を使っています。sourceはソースね。いうカタチでURLを指定します。値noneデフォルト値。画像が表示されます(スライスの値がまだデフォルトのままなので、画像全体が4つの角に表示されるだけですが)。幅を指定すれば表示されます。指定(4つの角に画像が100%で表示されています)CSSはこちら。指定した画像を9つにスライスします。スライスのしかたは、上から、右から、下から、左からの距離で指定します。9パーツに分けられます。デフォルト値は「100%」。画像全体がコーナーに表示されます。スライスを切っていないので、辺の部分は表示されません。ボーダーイメージを表示できます。ボーダーの幅は同じじゃなくてもOK。レティーナ対応で画像サイズを2〜3倍にしても、ボーダーの幅に縮小して収めてくれます。デフォルトは100%数値ピクセルの数値。単位無しで指定fillこれはちょっと特別な値。画像の中央部分をボックスの背景として表示できます。単独ではなく、%や数値の値の後に「半角スペース」で区切って使います。1つ〜4つで、「半角スペース」で区切って指定します。使えば最高5つの値を書くことになるね。じ値でスライスしたってこと。