【CSS Modules】border-image省略形プロパティの使い方

border-imageプロパティは、要素の境界線に画像を表示するための設定を一括で保持するプロパティです。このプロパティを使用すると、通常の単色やパターンではなく、デザイン性の高い画像を境界線として適用できます。具体的には、境界線として使用する画像のURL、画像をどのように切り分けて（スライスして）角や辺に配置するか、境界線の幅、境界線が要素のボックスの外側にどの程度はみ出すか、そして画像が境界線の辺に沿ってどのように繰り返されるかといった、複数の詳細な設定をまとめて定義できます。

例えば、フレームのような凝ったデザインの画像を境界線として使いたい場合に非常に有用です。画像を指定し、その画像を上、下、左、右の辺、そして四隅にどのように配置し、中央部分をどのように伸縮または繰り返し表示するかを細かく制御できます。これは、個別にborder-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatといったプロパティを設定する代わりに、一つのborder-imageプロパティで簡潔に記述できるため、CSSコードの可読性を高め、記述量を削減する効果があります。このプロパティは、要素の視覚的な表現を豊かにし、ユーザーインターフェースのデザインの幅を広げるのに役立ちます。

Copy
1.element {
2  border-image: url("path/to/image.png") 30 fill round;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません