2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

border-image-sourceの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.border-image-sourceとは?

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

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

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

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

{ border-image-source: 値; }

値の指定方法

  • none
  • url()




2.border-image-sourceの使い方

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

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です