仕様

border-image<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
一括/個別一括指定プロパティ
初期値個々のプロパティ
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率個々のプロパティ
計算値個々のプロパティ

border-image プロパティは、要素の通常の境界に画像を置き換える 元の画像(border-image-source), 画像を分割(border-image-slice), 画像の幅(border-image-width), 画像のはみ出す幅(border-image-outset), 画像の繰り返し(border-image-repeat) の値を単一の宣言で設定する一括指定プロパティです。

値の組み合わせ

  1. cdvSample620 > div { margin: 1em; padding: 1em; border: solid 1em }
  1. <div class="cdvSample620">
  2. <div style="">例</div></div>

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

Original image
例
  1. border-image: url(./sample.png) 33% fill /2 /1 repeat;

全てを指定しました。

例
  1. border-image: url(./sample.png) 33% /2 /1 repeat;

全てを指定しました。

例
  1. border-image: 33% /2 /1 repeat;

画像を省略して指定しました。border-image-source の初期値は none なので、border-image-source: none; と記述しているのと同じ結果となります。

例
  1. border-image: url(./sample.png) 33% /2 /1;

繰り返しを省略して指定しました。border-image-repeat の初期値は stretch なので、border-image-repeat: stretch; と記述しているのと同じ結果となります。

例
  1. border-image: url(./sample.png) 33% /2 repeat;

はみ出す幅を省略して指定しました。border-image-outset の初期値は 0 なので、border-image-outset: 0; と記述しているのと同じ結果となります。

例
  1. border-image: url(./sample.png) 33% / /1 repeat;

画像の幅を省略して指定しました。border-image-width の初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

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

分割を省略して指定しました。画像の幅とはみ出す幅も合わせて省略しています。border-image-slice の初期値は 100% なので、border-image-slice: 100%; と記述しているのと同じ結果となります。

例

CSS全体のキーワード

  1. cdvSample630 > div,
  2. cdvSample630 > div > div { margin: 1em; padding: 1em; border: solid 1em }
  3. cdvSample630 > div { border-image: url(./sample.png) 33% /2 /1 repeat; }
  1. <div class="cdvSample630">
  2. <div>親<div style="">子</div></div></div>

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

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

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

親
子
  1. border-image: initial;

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

親
子
  1. border-image: unset;

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

親
子