CSSborder -imageプロパティ

❮前へ完全なCSSリファレンス次へ❯

例

要素の周囲の境界線として画像を指定します。

#borderimg {
border-image: url(border.png) 30 round;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このborder-imageプロパティを使用すると、要素の周囲の境界線として使用する画像を指定できます。

border-imageプロパティは、次の省略形のプロパティです。

省略された値はデフォルト値に設定されます。

デフォルト値：	なし100％10ストレッチ
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	オブジェクト.style.borderImage = "url（border.png）30ラウンド"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

注：以下の各値については、個々のブラウザーのサポートを参照してください。

CSS構文

border-image: source slice width outset repeat|initial|inherit;

プロパティ値

Value	Description	Play it
border-image-source	The path to the image to be used as a border
border-image-slice	How to slice the border image
border-image-width	The width of the border image
border-image-outset	The amount by which the border image area extends beyond the border box
border-image-repeat	Whether the border image should be repeated, rounded or stretched
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

スライス値が異なると、境界線の外観が完全に変わります。

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}

CSSリファレンス

CSS Properties