CSS Border Image

Apa itu CSS Border Image?

CSS Border Image merupakan fitur yang hanya didukung pada browser yang support CSS3, yang memungkinkan untuk menggunakan gambar sebagai border pada elemen HTML.

contoh:

.example {
  border-image: url(./border.png) 30 30 round;
}

Mari kita bedah apa saja nilai yang terdapat pada border-image:

• url(./border.png) : adalah gambar yang akan digunakan sebagai border

border-image-source: url(./border.png);

• 30 30 : value yang menentukan berapa banyak gambar yang ditentukan oleh border-image-source.

border-image-slice: 30 30;

• round : yang menentukan bahwa gambar diulang secara round

border-image-repeat: round;

.example {
  /* source | slice | repeat */
  border-image: url(./border.png) 30 30 round;
}

perlu diingat sebelum membuat border-image sebaiknya tentukan dulu border-style (solid, dotted, dll),karena jika tidak maka border-image akan gagal dimuat.

Properti border image

• border-image-source : properti untuk memuat gambar yang akan dijadikan sebagai border sebagaimana terlihat pada contoh sebelumnya.
• border-image-slice : menentukan berapa banyak potongan gambar yang ditampilakan dari border-image-source.
• border-image-repeat: Properti ini menentukan bagaimana gambar pada tiap sisi (side) dan bagian tengah disusun.

border-image-repeat: stretch|repeat|round|space;

• border-image-width : properti menentukan lebar (width) pada border.

border-image-width: 10px;

• border-image-outset : properti menentukan jumlah area border yang melampaui border box.

border-image-outset: 50px;

Referensi:

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#constituent_properties
• https://www.w3schools.com/cssref/css3_pr_border-image.php