Blog

Kupas Tuntas Border CSS - Part 2

 

Kupas Tuntas Border CSS - Part 2

CSS     4 bulan yang lalu


Pada pembahasa sebelumnya kita telah membahas border radius. Pada artikel ini penulis ingin membahas "CSS Border Images".

Properti border-image pada CSS memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan normal di sekitar elemen.

Properti ini memiliki tiga bagian:

  1. Gambar untuk digunakan sebagai pembatas
  2. Di mana untuk mengiris gambar
  3. Tentukan apakah bagian tengah harus diulang atau diregangkan

Kami akan menggunakan gambar berikut (disebut "border.png"):

Anda bisa juga menggunakan CDN gambar diatas : https://www.w3schools.com/css/border.png

Properti border-image mengambil gambar dan memotongnya menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian tempatkan sudut di sudut, dan bagian tengah diulang atau direntangkan sesuai yang Anda tentukan.

Catatan: Agar border-image berfungsi, elemen juga membutuhkan kumpulan properti perbatasan!

Di sini, bagian tengah gambar diulang untuk membuat perbatasan:

.borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 round;
}

Di sini, bagian tengah gambar direntangkan untuk membuat perbatasan:

.borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 stretch;
}

Tips: Properti border-image adalah singkatan untuk properti border-image-sourceborder-image-sliceborder-image-widthborder-image-outset dan border-image-repeat properties.

CSS border-image - Nilai Slice yang berbeda

Nilai irisan yang berbeda benar-benar mengubah tampilan perbatasan:

.borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 50 round;
}

.borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}

.borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30% round;
}

Properti CSS Border Image

Property Description
border-image Properti singkatan untuk mengatur semua properti border-image- *
border-image-source Menentukan jalur ke gambar untuk digunakan sebagai perbatasan
border-image-slice Menentukan cara mengiris gambar perbatasan
border-image-width Menentukan lebar gambar perbatasan
border-image-outset Menentukan jumlah yang melaluinya area gambar perbatasan melampaui kotak batas
border-image-repeat Menentukan apakah gambar pembatas harus diulang, dibulatkan atau direntangkan