Properti border-image-repeat

Properti border-image-repeat mengatur cara pengulangan bagian dalam border dalam bentuk gambar. Untuk informasi lebih lanjut lihat properti border-image.

Sintaks

selektor {
	border-image-repeat: stretch | repeat | round;
}

Nilai

Nilai	Keterangan
`stretch`	Meregangkan gambar border hingga ukuran elemen. Nilai ini digunakan secara default.
`repeat`	Mengulang gambar border.
`round`	Mengulang gambar dan menskalakannya sehingga pada sisi elemen terdapat jumlah gambar yang utuh.

Nilai default: stretch.

Jumlah Parameter

Dapat menerima 1 atau 2 parameter. Jika diberikan dua parameter, maka parameter pertama akan untuk border atas dan bawah, dan parameter kedua - untuk kiri dan kanan.

Contoh . Nilai stretch

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Nilai repeat

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Nilai round

Saat ini dalam keadaan normal diatur nilai repeat, dan saat diarahkan (hover) - round. Perhatikan bahwa sebelum diarahkan ke border dimasukkan jumlah yang tidak utuh gambar belah ketupat, dan setelah diarahkan - utuh. Begitulah cara kerja round:

<div id="elem"></div>

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Dua kata

Nilai repeat untuk lebar dan stretch untuk tinggi:

<div id="elem"></div>

#elem {
	border-image-repeat: repeat stretch;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Lihat juga

properti border-image,
yang merupakan singkatan untuk border-gambar
properti border-image-source,
yang mengatur path ke gambar untuk border
properti border-image-slice,
yang membagi gambar untuk border
properti border-image-width,
yang mengatur ukuran gambar untuk border
properti border-image-outset,
yang mengatur pergeseran gambar untuk border