ボーダー画像をまとめて指定する

border-image

{ border-image 【 ボーダー・イメージ 】 : -source -slice -width -outset -repeat; }

border-imageプロパティは、ボーダー画像をまとめて指定するショートハンドです。

初期値 なし
継承 各プロパティに準じる
適用される要素 各プロパティに準じる
モジュール Backgrounds and Borders Module Level 3

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できますが、border-image-outsetプロパティの値は、border-imagewidthプロパティの値にスラッシュ(/)で続けて指定します。

サンプルコード

.border-box {
  border: 21px solid #76D647;
  border-image: url(../img/share/stripe.png) 21 21 round;
}

上の例で指定したborder-imageプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.strong-box {
  border: 21px solid #76D647;
  border-image -source: url(../img/share/stripe.png);
  border-image -slice: 21;
  border-image -width: auto;
  border-image -outset: 21px;
  border-image -repeat: round;
}

関連記事