Kalian pasti tau apa itu border-image, border-image adalah sebuah properti yang kegunaannya untuk pengganti pembatas sebuah gambar yang normal sekitar elemen.

Properti ini mempunyai tiga bagin

  • Gambar untuk digunakan sebagai pembatas
  • Dimana untuk mengiris gambar
  • Menentukan apakah bagian tengah harus diulang atau di membentang
Kami akan mengunakan gambar berikut(disebut "border.png")



border-image properti mengambil gambar dan irisan menjadi sembilan bagian, seperti papan tic-tac-toe.Kemudian menempatkan sudut si sudut-sudut.Dan bagian tengah yang berulang atau membentang seperti yang anda inginkan.
Catatan : border-image untuk bekerja, elemen juga membutuhkan border set properti!.

Di sini, bagian tengah diulang digunkan untuk pembatasan

Gambar sebagai pembatas.

Here is the original image:

Berikut adalah kodenya 
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Di sini bagian tengah gambar yang ditarik untuk membuat pembatasan.
Gambar sebagai pembatas.
Here is the original image:

Berikut adalah kodenya: 
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}

CSS3 border-image - Nilai Iris Berbeda
border-image: url(border.png) 50 round;
border-image: url(border.png) 20% round;
border-image: url(border.png) 30% round;

Berikut adalah kodenya: 
#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Itulah cara membuat property border-image dan jangan lupa untuk di coba karena border-image untuk mempercantik tampilan border yang anda sedang buat semoga bermanfaat