CSS3 border-image Property

Contoh

Tentukan gambar sebagai perbatasan sekitar elemen:

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

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Properti border-gambar memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen.

Properti border-image adalah properti singkatan untuk menetapkan perbatasan-gambar-source , border-image-slice , border-image-lebar , border-image-awal dan border-image-repeat properti.

nilai dihilangkan ditetapkan ke nilai standar.

nilai default:	none 100% 1 0 stretch
mewarisi:	no
animatable:	no. Read about animatable
Versi:	CSS3
sintaks JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.

Milik
border-image	16.0 4.0 -webkit-	11.0	15.0 3,5 moz	6.0 3.1 -webkit-	15.0 11.0 -o-

Catatan: Lihat dukungan browser individu untuk setiap nilai di bawah.

CSS Syntax

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

Nilai properti

Nilai	Deskripsi	Mainkan
border-image-source	Path ke gambar yang akan digunakan sebagai perbatasan
border-image-slice	Bagaimana untuk mengiris gambar perbatasan	Mainkan "
border-image-width	Lebar gambar perbatasan
border-image-outset	Jumlah dimana area gambar perbatasan melampaui kotak perbatasan
border-image-repeat	Apakah gambar perbatasan harus diulang, bulat atau diregangkan	Mainkan "
initial	Set properti ini ke nilai default. Baca tentang awal
inherit	Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Contoh lebih

Contoh

nilai slice yang berbeda benar-benar mengubah tampilan perbatasan:

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

Cobalah sendiri "