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.

Outer Borders to Images

<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/AVvXsEhoz4-ehOtozV1etathfLmEf49MS5cgtaDezEEd7Xn3hTucJnmBzb2b6PeXsWcWE-hRcpWBMTcxnZCJA7K1lJW_ffBjONw9tgR0HUqn51u8HdUBl_a_i7OhGslTdlHbJrHMSAI3nNC1hhF-/+1+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZG4L7NdRkFuiKaBD50wxlYTZ1lOSj4XgS_l8-snh_ueGOJHjTPdKc5lRr0rPXGg5A2wmmC9_f_esTbEHAqdAFRr4-ZWxoUjTGk-heWoTaFZzUkwHJVPIxrcp1qgFn3mXW4INHS19DQIw/+2+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRIl7ozszrZ6EHxRGTm8Sa0X6W4GRtHscBROerNajLhAAmrvA1wLg87usQDsaZTc7IkrGxWykFfsmeCR6-dj7c2idSruxh0KD7O4H-Z_npdjMGWmGq7w_CLZvHwSisKqee5o6sSHR7yB9/+3+small.jpg" alt="#" /></a>     
  
</div>


You are done.

Demo