How To Add Inner Borders to Images

Posted by Lasantha Bandara on November 25th, 2009 File Under : css, image1 Comment

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.

inner borders to images

<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; }


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="" alt="#" /></a>

<a href="#"><img src="" alt="#" /></a>

<a href="#"><img src="" alt="#" /></a>


You are done.


File Under : css, image

One Response to “How To Add Inner Borders to Images”

  1. Beben says:

    img:hover{opacity:0.5;border: 3px solid #ff0;}
    just add that code have can make a hove my friend...thanks for tutor

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.