CSS3 Border Image

Dengan css kita bisa mengatur border, bisa juga dibuat border radius yaitu border yang pojoknya melengkung.

Nah, kita juga bisa membuat border dari gambar.

Border-image

Dalam properti border-image, ada tiga bagian penting. Yaitu:

• Gambar yang akan digunakan
• Bagian yang akan dislice (potong)
• Mendefinisikan bagian tengah apakah mau di repeat atau stretch

Hal yang harus kamu pahami adalah, ada empat sisi dalam border, yaitu: atas, bawah, kanan, kiri. Ada juga pojok kanan atas, pojok kiri atas, pojok kanan bawah dan pojok kiri bawah.

Yang dimaksud bagian tengah adalah bagian sisinya, bukan bagian pojoknya. Karena, bagian tengah inilah yang panjang, dan harus didefinisikan jenis tampilan bordernya.

Pertama, siapkan gambarnya terlebih dahulu. Kalau saya sih pakai gambar ini:

Note: untuk membuat border-image, kamu harus mendefinisikan border terlebih dahulu.

Contoh kode:

#border-gambar {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://halamansatu.biz/wp-content/uploads/2020/04/border-image.png) 30 round;
}

Keterangan:

• Definisikan border dengan value 10px solid black.
• Atur padding selebar 15px.
• Kemudian baru definisikan border-image.

Panggil gambar dengan url() kemudian set 30 sebagai width gambar yang dislice, dan round adalah jenis repeat.

Hasilnya adalah:

Shorthand

Sebenarnya border-image adalah shorthand atau peringkas dari berbagai properti. Di dalamnya ada properti:

• border-image-source, untuk mengambil URL gambar border
• border-image-slice mengatur area yang dislice
• border-image-width, mengatur tebal border
• border-image-outset, mengatur outside box 
• border-image-repeat, mengatur jenis repeat

Untuk border-image-repeat ada dua variabel yang biasa digunakan, yaitu repeat dan round.

Lebih detailnya penggunaan sebagai berikut:

#border-gambar {
  border: 10px solid transparent;
  padding: 15px;
  border-image:
      url("https://halamansatu.biz/wp-content/uploads/2020/04/border-image.png")  /* source */
      27 /                    /* slice */
      36px 28px 18px 8px /    /* width */
      18px 14px 9px 4px       /* outset */
      round;                  /* repeat */
}

Setiap bagian di beri tanda / untuk memisahkan bagian slide, width, outset atau repeat. Tapi harus berurutan.

Property Border Gambar CSS3

Berikut ini adalah daftar property untuk mengatur border gambar:

Properti	Keterangan
border-image	Shorhand (syntax singkat) untuk menulis border gambar
border-image-outset	Menentukan apakah border di luar atau tidak dari suatu element
border-image-repeat	Menentukan bagaimana border akan diulangi
border-image-slice	Menentukan bagaimana gambar akan dipotong untuk border
border-image-source	Menentkan URL sumber gambar untuk border
border-image-width	Menentukan tebal border