CSS ボーダーイメージジェネレーター

CSS border-image プロパティとは？

CSS border-image プロパティは、要素のボーダーを単色ではなく画像やグラデーションで装飾できます。border-image-source（画像やグラデーション）、border-image-slice（画像の領域分割）、border-image-width、border-image-outset、border-image-repeat（スライスのタイルやストレッチ）を組み合わせたショートハンドです。グラデーションを使えば、外部画像ファイルなしで鮮やかなマルチカラーボーダーを作成できます。

border-image はすべてのモダンブラウザでサポートされており、装飾フレーム、グラデーションボーダー、単色では実現できないパターンベースのアウトラインの作成に特に便利です。

ボーダースライスの解説

border-image-slice プロパティはソース画像（またはグラデーション）を 9 つの領域に分割します: 4 つのコーナー、4 つのエッジ、1 つのセンター。スライス値はこれらのカットがどこで行われるかを決定します。スライスの割合が高いほど画像のコーナーにより多く使われ、低いほどエッジがより伸びます。グラデーションソースでは、スライスはボーダー領域とセンターにどれだけのグラデーションを割り当てるかを制御します。

異なるスライス値を試すと外観が劇的に変化します: 50% のスライスはコーナーとエッジに均等な重みを与え、10% のスライスはグラデーションを主にストレッチされたエッジ領域で見えます。

ボーダーイメージのリピートモード

border-image-repeat プロパティは画像のエッジ領域がボーダーに沿ってどのようにタイル配置されるかを制御します。CSS は 4 つのモードを提供し、それぞれ異なる視覚効果を生み出します:

グラデーションの場合、stretch が通常最も滑らかな結果を出します。グラデーションがボーダー全体にシームレスにブレンドされるためです。round と repeat は興味深いパターン効果を作成できます。

border-image を使う場面

単純な単色よりも装飾的なボーダーが必要な場合、border-image が理想的です。一般的な用途には、ヒーローセクションのグラデーションボーダー、画像やカードの周囲の装飾フレーム、コールアウトボックスのパターンボーダー、ブランドパレットに合わせたテーマボーダーがあります。ストレッチモードではボーダーが歪みなく要素に合わせてスケールするため、レスポンシブな装飾要素の作成にも便利です。

ただし、個々の辺を正確に制御する必要がある場合は border-image は適していません — その場合は個別の border プロパティを使ってください。border-image は 4 辺すべてに均一に適用されます。

border-image の生成方法

このツールを使えば視覚的に border-image をデザインできます: ボーダー幅を設定し、スライスの割合を調整し、リピートモードを選択し、2 つのグラデーション色と角度を選びます。プレビューがリアルタイムで更新され、CSS コードが自動生成されます。「CSS をコピー」をクリックしてコードを取得し、スタイルシートに貼り付けます。

すべてブラウザ内でローカルに実行されます — データはサーバーに送信されず、デザインの選択は完全にプライベートです。