仕様

border-image-sourcenone | <image>
一括/個別個別指定プロパティ
初期値none
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率なし
計算値キーワードnoneまたは計算された<image>

border-image-source プロパティは、border-style で指定されたレンダリングの代わりに使用する画像を指定し、border-image-slice で fill キーワードが指定されている場合は、要素の追加の画像背景として使用します。

画像

  1. cdvSample720 > div { padding: 1em; border: solid 1em; border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample720">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-source は非継承プロパティであり初期値は none なので、border-image-source: none; と記述しているのと同じ結果となります。

例
  1. border-image-source: url(./sample.png);

画像のURL を指定しました。

Original image
例
  1. border-image-source: linear-gradient(blue, lime);

グラデーション関数 を指定しました。

例

キーワード

  1. cdvSample720 > div { padding: 1em; border: solid 1em; border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample720">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-source は非継承プロパティであり初期値は none なので、border-image-source: none; と記述しているのと同じ結果となります。

例
  1. border-image-source: none;

キーワード none を指定しました。none は、境界画像を使用しません。代わりに border-style で指定されたものを表示します。

例

CSS全体のキーワード

  1. cdvSample740 > div,
  2. cdvSample740 > div > div { padding: 1em; border: solid 1em; border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  3. cdvSample860 > div { border-image-source: url(./sample.png); }
  1. <div class="cdvSample740">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

Original image
親
子
  1. border-image-source: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-image-source: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-image-source プロパティの初期値は none です。

親
子
  1. border-image-source: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-image-source プロパティは非継承プロパティなので初期値の none を設定します。

親
子