Pa tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 19 : Cara Membuat Rounded Corners di CSS. Selanjutnya, kita akan belajar cara mengatur border image di CSS.
Properti border-image CSS digunakan untuk menambahkan border gambar ke beberapa elemen.
Anda tidak perlu menggunakan kode HTML apa pun untuk memanggil border image.
Contoh sintaks border-image adalah sebagai berikut :
#borderimg { border: 10px solid transparent; padding: 15px; }
Nilai yang paling umum digunakan ditunjukkan di bawah ini :
No. | Nilai & Deskripsi |
1 | border-image-source Digunakan untuk menentukan sumber border image |
2 | border-image-slice Digunakan untuk memotong border image |
3 | border-image-width Digunakan untuk mengatur lebar border image |
4 | border-image-repeat Digunakan untuk mengatur border image perulangan border sebagai rounded, repeat dan stretched |
Berikut adalah contoh penggunaan border-image yang digunakan sebagai batas gambar untuk elemen.
<html> <head> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 10px; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; } </style> </head> <body> <p id = "borderimg1">Ini adalah contoh border image.</p> <p id = "borderimg2">Ini adalah contoh border image.</p> <p id = "borderimg3">Ini adalah contoh border image.</p> </body> </html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini bisa membantu Anda mempelajari cara menggunakan border image di CSS untuk mendesain border di dokumen HTML.