ボーダー
border-image
border-image は、画像やグラデーションを 9 つに切り分けて、border の線の代わりに描くショートハンドです。角は四隅に置き、辺は伸ばしたりくり返したりして枠を作ります。
構文<'border-image-source'> …
<'border-image-source'>
|| <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?
|| <'border-image-repeat'>
<'border-image-source'> = none | <image>
<'border-image-slice'> = [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?
<'border-image-width'> = [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<'border-image-outset'> = [ <length [0,∞]> | <number [0,∞]> ]{1,4}
<'border-image-repeat'> = [ stretch | repeat | round | space ]{1,2}プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
border-imageurl(/border-frame.svg)border-image-source
30border-image-slice
1border-image-width省略 → 初期値
0border-image-outset省略 → 初期値
roundborder-image-repeat
コード
.box {
border: 28px solid #cbd5e1;
border-image: url(/border-frame.svg) 30 round;
}コントロール
border-image-source
border-image-slice
fill
/ border-image-width
/ border-image-outset
border-image-repeat
横と縦を同じ値にする
解説
9 つに切り分ける (slice)
border-image-slice は、画像の上・右・下・左の端からどれだけ内側で切るかを指定します。切ると画像は 4 つの角、4 つの辺、中央の 9 つに分かれ、角は border の角に、辺は border の辺に描かれます。
- 数値は画像の中の座標です（ビットマップならピクセル、SVG ならその座標）。このページの見本の画像は 90×90 なので、
30で 30 ずつ均等に切れます。%は画像の幅・高さに対する割合です。初期値は100%です。 - 中央の部分はふだん捨てられます。
fillを付けると、中央も要素の内側（背景の上）に描かれます。 - 2〜4 つ書くと、margin などと同じ順で辺ごとに切り方を変えられます（このページのコントロールは 1 つだけです）。
描く太さと外へのはみ出し (width / outset)
切り方のあとに / で区切って border-image-width、さらに / で border-image-outset を書けます。
border-image-widthは画像を描く帯の太さです。初期値の1のように単位のない数値は border の太さの倍数、autoは切り出した部分の元の大きさです。border 自体の太さ（レイアウト）は変わりません。border-image-outsetは、画像を描く範囲を border の外側へどれだけ広げるかです。はみ出した部分はスクロールの対象にならず、クリックも受けません。- width を省いて outset だけ書くときは
30 / / 12pxのように/を 2 つ続けます。
辺の並べ方 (repeat)
stretch：辺の画像を 1 枚だけ、辺の長さいっぱいに引き伸ばします。初期値です。repeat：辺の中央から左右（上下）へくり返し、両端の画像は途中で切れます。round：ちょうどの枚数で並ぶように画像を伸び縮みさせます。space：切れずに収まる枚数だけ並べ、余りを画像の前後と間に均等に配ります。
2 つ書くと、1 つ目が上下の辺（横方向）、2 つ目が左右の辺（縦方向）の並べ方になります。
気をつけること
- border-image は border の線の代わりに描かれるだけで、border の太さは
border-widthで決まります。border-styleがnoneだと太さが 0 になり、border-image-widthの初期値（太さの 1 倍）では何も描かれません。このページではborderで 28px の枠を付けています。 borderショートハンドはborder-imageも初期値に戻します。両方書くときはborderを先に書きます。border-radiusを付けても、border-image の角は丸くなりません。- グラデーションには元の大きさがないので、画像を描く範囲（outset が無ければ border の外側の縁まで）の大きさで描いてから切ります。
linear-gradient(…) 1と書くと、グラデーションの縁の 1px を border の太さまで引き伸ばした、グラデーションの枠になります。