How To Add Outer Borders to Images - TRICK BAZAR

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'>
 
#outer-borders a img, #outer-borders a  { border: none; float: left; }
#outer-borders a { margin: 3px; }
#outer-borders a:hover { outline: 3px solid #0000ff; }
 
</style>

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

4.Now add your images as below.

<div id="outer-borders">
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJ9jPhf8ztWvKGO2lgu5LZUT6dsEYNtXlLI770QiVfXwwafGfz_vZSKyiKdKGrYV6qI5c0r1C8laG1bPpOBIPXQgw46oZ-p8TEs7a8swNETGkzZYvPKPQ584Oumf1-PPB1rPrPorV8YxI/+1+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOILAXyK8uZfuteV4RrP60QLbFl_zFPrb_nYpmrYP4zdwL2L1fRQl9KYQeUSxOz4xV1XykurGy6daXIBc6hLYe-wEWhx0_1i957ve87SLVIYHb9rwi3r9I3S5VdIY-C-FDjsXO8vNPa99/+2+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyeUpa-Bngr02ZQwW7j9oP-N2_4xqwXzOUBEkJelqbSSiy3K6WcW7AOlYsqscMgkO-L-pb4zzj3U7AmJm2t9-JFEacTmi5Pnihwy32e8p3EPhX5huCSMjx6OjV3c6e2LrXixmsUk1XnCP/+3+small.jpg" alt="#" /></a>     
  
</div>

You are done.

Demo