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/AVvXsEhlYHbZ4BnaMO3ZNRiygoqUKO7CSeR5d60wMYV3grjxMXa4bf880WMCM2XVSKdQH0X91RLlhtgHyevBbWzClDiX-Esv0Wlp3N1oMHqRE7iSnoQtrkj9O4qaw3vwyQeiGtRFjck8qtqKAfhM/+1+small.jpg" alt="#" /></a>

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

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8rKg13fVQoz31oB8TqmTAVKJJ5AshS_YE58wmUsxg6aDwJIqQ8gJ5iB4dQJnM5GJ-t9pCldaYYFzJ9jmHeR6d-gAB1ZXc1eV7-q2AU6c4yZ8KO0A8S3UDvZeeCSUn_XMIIFekje8U4rQx/+3+small.jpg" alt="#" /></a>

</div>

Now click Save

Related Posts by Categories