CSS3 border-image プロパティ

例

要素の周りにボーダーとして画像を指定します：

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

border-image プロパティは、要素の周りに通常のボーダーの代わりに画像を指定することができます。

プロパティは、以下のプロパティを設定するショートハンド・プロパティです： border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat プロパティ。

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

デフォルト値：	none 100% 1 0 stretch
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.borderImage="url(border.png) 30 round" Try it

ブラウザ・サポート

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

-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
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;

プロパティの値

値	説明	Play it
border-image-source	ボーダーとして使用する画像へのパス
border-image-slice	ボーダー画像の分割方法	Play it ❯
border-image-width	ボーダー画像の幅
border-image-outset	ボーダーボックスを越えて拡張するボーダー画像領域の量
border-image-repeat	画像ボーダーを繰り返すか、丸めるか、引き伸ばすかどうか	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照

その他の例

例

完全にボーダーの外観を変更するいろいろなスライス値：

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}