Properti gambar perbatasan CSS

Sebelumnya _ Referensi CSS Lengkap Selanjutnya _

Contoh

Tentukan gambar sebagai batas di sekitar elemen:

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

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Properti border-imageini memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai batas di sekitar elemen.

Properti border-image adalah properti singkatan untuk:

Nilai yang dihilangkan diatur ke nilai defaultnya.

Nilai bawaan:	tidak ada 100% 10 peregangan
Diwarisi:	tidak
Animasi:	tidak. Baca tentang animasi
Versi: kapan:	CSS3
Sintaks JavaScript:	objek .style.borderImage="url(border.png) 30 putaran"

Dukungan Peramban

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

Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.

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-

Catatan: Lihat dukungan browser individual untuk setiap nilai di bawah ini.

Sintaks CSS

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

Nilai properti

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

Lebih Banyak Contoh

Contoh

Nilai irisan yang berbeda benar-benar mengubah tampilan perbatasan:

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