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.
