Dengan properti CSS border-image kita bisa mengatur gambar untuk digunakan sebagai border di sekitar elemen.
Section Artikel
Properti CSS border-image
Properti CSS border-image berfungsi untuk menetukan gambar yang akan digunakan sebagai ganti border normal di sekitar elemen..
Properti ini memiliki tiga bagian:
- Gambar untuk digunakan sebagai pembatas
- Tempat memotong gambar
- Menentukan apakah bagian tengah harus diulang atau diregangkan
Sekarang kita coba gunakan gambar berikut
Properti border-image digunakan untuk mengambil gambar dan memotongnya menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian menempatkan sudut di sudut, dan bagian tengah diulang atau diregangkan seperti yang akan kita tentukan.
Catatan: Agar border-image nya berfungsi, maka kita juga harus menambahkan properti border untuk elemennya.
Di sini, bagian tengah gambar diulangi untuk membuat border:
Contoh :
<!DOCTYPE html> <html> <head> <style> #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 30 round; } </style> </head> <body> <h1>The border-image Property</h1> <p>Di sini bagian tengah gambar diulangi untuk membuat border:</p> <p id="borderimg">border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 30 round;</p> <p>Original Foto:</p><img src="https://dosenit.com/wp-content/uploads/2020/10/border.jpg"> <p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p> </body> </html>
Di sini, bagian tengah gambar direntangkan untuk membuat border:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 30 stretch;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Di sini bagian tengah gambar diulangi untuk membuat border:</p>
<p id="borderimg">border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 30 stretch;</p>
<p>Original Foro:</p><img src="https://dosenit.com/wp-content/uploads/2020/10/border.jpg">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
Tip: Properti border-image sebenarnya adalah properti singkatan untuk properti border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties
CSS Border Image -Beda Nilai Irisan
Nilai irisan/potongan yang berbeda benar-benar bisa mengubah tampilan border di web:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg) 30% round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p id="borderimg1">border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg)) 50 round;</p>
<p id="borderimg2">border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg)) 20% round;</p>
<p id="borderimg3">border-image: url(https://dosenit.com/wp-content/uploads/2020/10/border.jpg)) 30% round;</p>
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
Properti CSS Border Image
| Property | Deskripsi |
|---|---|
| border-image | Properti singkatan untuk menyetel semua properti border-image- * |
| border-image-source | Menentukan jalur ke gambar yang akan digunakan sebagai border |
| border-image-slice | Menentukan cara memotong border-image |
| border-image-width | Menentukan lebar border-image |
| border-image-outset | Menentukan jumlah di mana area border-image melampaui kotak border |
| border-image-repeat | Menentukan border-image harus diulang, dibulatkan atau direntangkan |
