ボーダーイメージプロパティ

最終更新：2026-09-13

border-image ボーダーイメージプロパティ

border-image を使うと、実線や破線の代わりに画像を使って要素のボーダーを描画できます。画像は 9 分割のグリッド（4 つの角、4 つの辺、中央の領域）にスライスされ、各部分が対応するボーダー領域にマッピングされます。これは複雑な装飾ボーダーを作るための強力なツールです。

カテゴリ
初期値	none
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

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

⚙️ 値

値	タイプ	説明
`<border-image-source> \|\| <border-image-slice> \|\| <border-image-width> \|\| <border-image-outset> \|\| <border-image-repeat>`	値	ボーダーイメージのショートハンド

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
border-image	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

注意： border-image を使用する際は、border または border-width も宣言する必要があります。そうしないと、画像ボーダーは表示されません。

ヒント： border-image-slice の値は、画像の端から内側へ切り込む距離です。round キーワードを指定すると、ボーダー画像がタイル状に並べられ、辺の長さに合わせて拡大縮小されます。

❓ よくある質問

Qborder-image のブラウザサポートはどの程度ですか？

Aモダンブラウザ（Chrome、Firefox、Edge、Safari）はすべて対応していますが、IE11 およびそれ以前はサポートが限定的または皆無です。border-image 非対応のブラウザでも通常のボーダーが描画されるよう、常に border: solid と border-width をフォールバックとして宣言してください。そうしないと、要素にボーダーがまったく表示されなくなる可能性があります。

Qborder-image を使ったのにボーダーが表示されないのはなぜですか？

Aよくある原因は次のとおりです。border-width が設定されていない（border-image はそれ自体では幅を提供しないため、最初に border でボーダー領域を作る必要がある）、画像のパスが間違っている、スライス値が実際の画像より大きい、などです。確実なパターンは、border: 20px solid transparent; の後に border-image を続けることです。

Qborder-image における slice、repeat、outset はそれぞれ何を意味しますか？

Aslice は、9 分割のグリッドを作るために各辺から内側へ切り込む距離です（単位なし、ピクセルまたはパーセントとして扱われます）。repeat は辺の埋め方を決定します。stretch（引き伸ばし）、round（タイル状に並べて合わせる）、repeat（タイル状、切り抜かれる場合があり）です。outset はボーダー画像を外側へ拡張します。ショートハンドの順序は、url(画像) slice / width / outset repeat です。

Qborder-image は border-radius と同時に使用できますか？

A実はうまくいきません。border-image は border-radius によってクリップされないため、角丸の領域に画像の角が飞び出したりギザギザになったりして、組み合わせの見た目が悪くなります。「角丸＋画像ボーダー」のエフェクトが必要な場合は、background-image と padding でシミュレートするか、mask 技法を使ってください。