Macam-macam HTML Garis Tepi Gambar (Border Image)
,
Posting kali ini berkaitan dengan artikel sebelumnya tentang Cara Merubah Ukuran dan Merubah Posisi Gambar atau Banner. Kali ini kita akan berkenalan dengan macam-macam jenis garis tepi pada gambar, atau yang biasa disebut border image. Spesial juga posting yang satu ini buat Cutkak Alaika Abdullah.. Semoga bermanfaat.
Nah sekarang saya akan coba menggunakan beberapa jenis border pada gambar di bawah ini. Dengan tribut gambar tanpa link, ukuran 100 x 100 dengan posisi gambar di tengah.
<div style="text-align:center;"><img src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
Hasilnya :
Nah sekarang saya akan menambah gambar di atas dengan garis tepi atau border dengan menambahkan atribut style="border:5px solid #3F2828;" . Menggunakan ukuran border 5px, jenis border solid, dan warna border #3F2828. Yang semuanya bisa Anda ganti sesuai selera.
<div style="text-align:center;"><img style="border:5px solid #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
Hasilnya :
Selain solid, ada pula beberapa jenis border lainnya. Nah, berikut ini beberapa macam border beserta contohnya.
- dashed
<div style="text-align:center;"><img style="border:5px dashed #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
- dotted
<div style="text-align:center;"><img style="border:5px dotted #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
- double
<div style="text-align:center;"><img style="border:5px double #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
- outset
<div style="text-align:center;"><img style="border:7px outset #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
- inset
<div style="text-align:center;"><img style="border:7px inset #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
- groove
<div style="text-align:center;"><img style="border:7px groove #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
Atau dengan beberapa kombinasi border di setiap tepinya. Contoh :
<div style="text-align:center;"><img style="border-top:3px solid #3F2828;border-right:15px outset #3F2828;border-bottom:10px solid #3F2828;border-left:7px double #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>
Hasilnya :
Bagaimana, mudah bukan? Nah, silakan berkreasi dengan border sesuka hati deh, jika mau praktek langsung silakan mampir di halaman ini. Seperti biasa, jika ada yang ingin menambah atau mengurangi, yuk kita saling belajar dan berbagi di kotak komentar artikel ini. Met malam dulur !
gambar : blog.djarumbeasiswaplus.org
