How To Add Inner Borders to Images

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>

#inner-borders a img, #inner-borders a { border: none; overflow: hidden; float: left; }
#inner-borders a:hover { border: 3px solid #0000ff; }
#inner-borders a:hover img { margin: -3px; }

</style>

Note:You can change border color,border size,margin,... But both border size and margin must have a same numerical value.

4.Now add your images as below.

<div id="inner-borders">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCjOisqnExnZZnrxE88959dfiDhxc1rc-MGp8IZr1zk9Uhh2nXuaHsmJOukCueRg3sRHiE_SyVzvibl2V4DJRWroe9CdZnwqX9LX9HMi-i3Yhu6OjeUuTUtb8iiqNXBXXE7aH9malVik6/+1+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE6h72yY4Qz8Gn4wFPBjheS5zRljUX__YNZAvQxrZhh1DBSv52g6XwuiBy_umuao2ed5PuyfqMWrfwPE1sbxJw_DMXsV0n4MvUs7MpxmG6lcedCygJv5_u6kN2mse06OK2kjB3L5tvXSA3/+2+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqGFE-DPT5ZvsBpJ85y7awexPVIc5NPb85apRqBO6j_MZARwJuNkl7A6xc0M4U6wSa3xhSHmT9poRr6u-R7hOGiroXiIHcUGAl0bCIMqIWrzGccjimVp1zbfUv-VNouCtFv_rnmWMH5WM/+3+small.jpg" alt="#" /></a>

</div>

Now click Save