CSS3 ボーダー画像

CSS3 border-image プロパティにより、要素周りのボーダーとして画像を使用することができます。

ブラウザ・サポート

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

数字の後に続く -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-

CSS3 border-image プロパティ

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

プロパティは、3つの部分からなります：

ボーダーに使用する画像
画像をスライスする場所
中間部分を繰り返すか、引き伸ばすかどうかを定義

次の画像 ("border.png" と言う) を使用します：

Border

border-image プロパティは、画像を受取り、三目並べボードのように 9 つの部分にスライスします。 4 隅を各隅に配置した後、中間部分を指定に従い繰返すか引伸ばします。

注: border-image が機能するには、要素にも border プロパティの設定が必要です！

ここでは、ボーダーを作成するために画像の中間部分を繰り返します：

An image as a border!

コードは以下の通り：

例

#borderimg {
    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;
}

Try it Yourself ❯

ここでは、ボーダーを作成するために画像の中間部分を引伸ばしています：

An image as a border!

コードは以下の通り：

例

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

Try it Yourself ❯

チップ:border-image プロパティは、実際には、border-image-source、border-image-slice、 border-image-width、border-image-outset、border-image-repeat のショートハンドプロパティです。

CSS3 border-image - いろいろなスライス値

スライス値が異なると、ボーダーの外観が完全に変わります：

例 1:

border-image: url(border.png) 50 round;

例 2:

border-image: url(border.png) 20% round;

例 3:

border-image: url(border.png) 30% round;

コードは以下の通り：

例

#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;
}

Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯

CSS3 ボーダープロパティ

プロパティ	説明
border-image	全ての border-image-* プロパティを設定するためのショートハンド・プロパティ
border-image-source	ボーダーとして使用する画像のパスを指定する
border-image-slice	ーダー画像のスライス方法を指定する
border-image-width	ボーダー画像の幅を指定する
border-image-outset	ボーダー画像エリアをボーダー・ボックスの外側に拡張する量を指定する
border-image-repeat	ボーダー画像を repeat（繰返し）するか、round（繰り返し。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整）するか、または stretch（引き伸ばし）するかを指定する

❮ 前章へ次章へ ❯