CSSで使うborder-image  の徹底解説｜使い方・注意点・実践例まとめ

border-imageとは？

CSSの border-image プロパティは、通常の単色や破線・点線ではなく、画像を枠線として使える特殊な機能です。

装飾性の高いデザインや、オリジナルの枠線を作りたいときに便利で、画像を9分割して枠線に適用する仕組みを持っています。

.element {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

border-image: <source> <slice> / <width> / <outset> <repeat>;

• <source>: 画像のURL
• <slice>: 画像の分割位置（ピクセル or %）
• <width>: 枠線の太さ
• <outset>: 枠線が外側へどのくらい広がるか
• <repeat>: 繰り返し方法（stretch / repeat / round / space）

border-imageの仕組み（9スライス法）

画像を上下左右＋中央で9分割して、それぞれを枠線に適用します。

1. 四隅 → 角に配置
2. 上下左右 → 辺の枠線に配置
3. 中央 → デフォルトでは表示されない（fill指定で表示可能）

実用例

1. シンプルな枠線画像を適用

.box {
  border: 20px solid transparent;
  border-image: url(frame.png) 20 stretch;
}

2. 繰り返してタイル状に適用

.box {
  border: 15px solid transparent;
  border-image: url(pattern.png) 30 repeat;
}

3. 中央部分も背景に使う（fill）

.box {
  border: 25px solid transparent;
  border-image: url(texture.png) 25 fill round;
}

→ 中央部分にテクスチャを表示し、背景のように見せられる。

よく使うオプション解説

border-image-slice

枠線の分割割合を指定します。

border-image-slice: 30;
border-image-slice: 20 30 40 50;

• 値を1つだけ → 全方向同じ
• 4つ指定 → 上右下左の順

border-image-repeat

枠線の伸縮方法を制御。

• stretch: 引き延ばす
• repeat: タイル状に繰り返す
• round: 余りが出ないように調整して繰り返す
• space: 均等にスペースを空けて配置

注意点・落とし穴

• 必ず border を設定しないと効かない → border: solid transparent; が必須
• 画像サイズと slice の指定が合わないと崩れる
• 高解像度環境（Retina等）では画像がぼやけやすい
• 単純な角丸や影なら border-radius や box-shadow の方がパフォーマンスが良い

実務での活用シーン

• デザイン要件で特殊な装飾枠が必要なとき
• 印刷物を意識したようなクラシックな額縁デザイン
• レトロゲーム風のピクセル調UI

ただし、単純装飾ならCSSだけで実現した方が保守性が高いため、**「画像をどうしても使いたいとき」**に絞って使うのがベストです。

まとめ

• border-image は画像を枠線に適用できる強力なプロパティ
• 仕組みは「9分割法」
• slice と repeat の理解が重要
• 実務では「どうしてもCSSだけでは表現できない枠」に有効