Cara Membuat Double Border pada Gambar dengan CSS - Membuat double border pada gambar adalah salah satu cara untuk menampilkan gambar pada halaman website. Sebekumnya saya juga memposting cara membuat border pada gambar, namun hanya border tunggal. Pada kesempatan kali ini saya akan sedikit berbagi tentang cara membuat double border pada gambar dengan css.
Perlu diketahui untuk membuat border dengan css kita dapat menggunakan atribut border yang kemudian kita sematkan kedalam element img. Border dapat kita buat dengan warna yang kita inginkan ( border-color). Selain warna border juga dapat kita tampilkan dengan gaya sesuai keinginan (border-style). Untuk lebar border kita dapat menggunakan border-width. Karena judul kali ini double border maka saya dapat menggunakan padding dan background untuk membuatnya.
Berikut adalah cara untuk membuat double border pada gambar dengan css:
- Siapkanlah gambar, kemudian panggil gambar ke halaman web. Gunakan element img seperti berikut ini.
<img src="namagambar.JPG"/>
- Buatlah css untuk border img. Gunakan script dibawah ini.
img{
border-width: 1px;
border-style: solid;
border-color: red;
padding: 3px;
background: yellow;
}
border-width: 1px;
border-style: solid;
border-color: red;
padding: 3px;
background: yellow;
}
Unduh file script double border image disini.
Cukup sekian postingan dari saya tentang Cara Membuat Double Border pada Gambar dengan CSS. Semoga bermanfaat dan terima kasih.
Posting Komentar