Properti border-image-width

Properti border-image-width mengontrol lebar bagian border yang terlihat, menskalakannya. Jika nilai ini lebih besar dari lebar border-width, gambar border akan merayap di bawah konten.

Untuk informasi lebih detail lihat properti border-image.

Sintaksis

selektor {
	border-image-width: Unit CSS | persentase | angka | auto;
}

Nilai

Nilai	Deskripsi
Unit CSS	Nilai dalam unit CSS yang ditentukan.
Persentase	Nilai dalam persentase relatif terhadap ukuran blok yang diberikan border.
Angka	Nilai numerik, yang dikalikan dengan `border-width`.
`auto`	Kata kunci. Jika ditetapkan, nilainya sama dengan `border-image-slice` yang sesuai. Jika tidak ada ukuran yang cocok, digunakan nilai `border-width`, dimana gambar mengisi seluruh sudut border, merayap di bawah konten. Lihat contoh untuk pemahaman yang lebih baik.

Nilai default: 1.

Contoh . Angka

Atur nilai border-image-width ke 2 saat elemen dihover dengan mouse. Dengan demikian border akan berukuran 26px*2 - 2 kali lebih besar dari lebarnya, yang ditetapkan di border-width. Border akan masuk di bawah teks (seperti latar belakang):

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

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

Contoh . Ubah border-image-repeat menjadi round

Pada contoh sebelumnya, saat dihover, border tidak akan memiliki jumlah belah ketupat yang bulat. Perbaiki ini dengan mengatur border-image-repeat ke nilai round:

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

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

Contoh . Persentase

Atur nilai border-image-width ke 50% saat elemen dihover dengan mouse. Dengan demikian border akan berukuran 50% dari ukuran blok (artinya dua border, kanan dan kiri, akan menutupi seluruh blok):

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

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

Contoh . Persentase

Atur nilai border-image-width ke 30% saat elemen dihover dengan mouse. Dengan demikian border akan berukuran 30% dari ukuran blok:

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

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

Contoh . Pixel

Atur nilai border-image-width ke 50px saat elemen dihover dengan mouse:

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

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

Contoh . Nilai auto

Atur nilai border-image-width ke auto saat elemen dihover dengan mouse.

Sebelum dihover, border-image-width memiliki nilai 1 (default). Dalam contoh ini, border-width sengaja ditetapkan ke 52px, dan border-image-slice - ke nilai 26 (efek dengan auto akan teramati hanya jika border-width tidak sama dengan border-image-slice). Karena border-image-width memiliki nilai 1, gambar border akan menempati seluruh lebar border-width, yaitu akan meregang hingga 52px. Saat dihover, nilai border-image-width akan diatur ke auto dan lebar gambar akan menjadi sama dengan nilai border-image-slice, yaitu 26px:

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

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	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 menetapkan path ke gambar untuk border
properti border-image-slice,
yang merupakan pemotongan gambar untuk border
properti border-image-repeat,
yang merupakan pengulangan gambar untuk border
properti border-image-outset,
yang menetapkan pergeseran gambar untuk border