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

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

Nilai

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):

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

css#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