Properti border-image-outset

Properti border-image-outset memungkinkan untuk menggeser batas ke luar elemen. Sebagai nilai ditentukan angka tanpa satuan atau satuan untuk ukuran apa pun, kecuali persen. Jika ditentukan angka tanpa satuan, maka itu adalah pengali, yang mengalikan nilai properti border-width. Nilai negatif tidak didukung.

Untuk informasi lebih detail mengenai gambar untuk batas lihat properti border-image.

Sintaksis

selektor {
	border-image-outset: angka positif;
}

Contoh . Angka

Atur nilai border-image-outset menjadi 3 saat elemen dihover dengan mouse. Dengan demikian, batas akan bergeser sejauh 26px*3 - 3 kali lebih jauh dari lebarnya, yang ditetapkan dalam border-width:

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

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

Contoh . Piksel

Atur nilai border-image-outset menjadi 30px saat elemen dihover dengan mouse. Dengan demikian, batas akan bergeser sejauh 30px:

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

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

Lihat juga

properti border-image,
yang merupakan singkatan untuk batas-gambar
properti border-image-source,
yang menetapkan path ke gambar untuk batas
properti border-image-slice,
yang memotong gambar untuk batas
properti border-image-repeat,
yang mengulang gambar untuk batas
properti border-image-width,
yang menetapkan ukuran gambar untuk batas