[CSS] border-image-sourceプロパティでボーダーに利用する画像を指定しよう!

1.border-image-sourceとは?

border-image-sourceプロパティはボーダーに利用する画像を指定できます。

border-styleプロパティで指定したボーダーの代わりとなるのでボーダーを表示する指定を併記しておく必要があります。

画像は指定した要素の領域の角に表示されます。

値の指定方法は以下の通りです。

{ border-image-source: 値; }

値の指定方法

2.border-image-sourceの使い方

それではborder-image-sourceの使い方をみていきましょう。

.border-sample {
 width: 200px; 
 height: 120px;
 border: 1px solid blue;
 border-image-source: url("sample.png");
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!