Cool CSS Image Border Style
I was recently playing around with my family photo blog, trying to give the photos a bit more pizzazz.
I found some interesting tutorials for making CSS borders here at mandarindesign.com and a very nice looking drop shadow like this one from 1976design.com. The problem is that they either require nesting <img> tags within <div> tags or are a bit bland. Nesting tags would have required me to go through all my old blog posts and wrap every <img> with a <div>.
After some experiments I came up with a very cheap pseudo drop shadow that is quite effective using nothing but simple CSS style.
All I’ve done is center the image and add padding of 8 pixels surrounded by a border. The trick is that the top and left edges of the border are only 1 pixel wide, while the right and bottom are 2 pixels. Also, the top and left sides of the border are a slightly lighter colour than the bottom and right.
Since it is intended for all thumbnail images in my WordPress blog posts, the following is what I added to my theme style. It is applied to all <img> tags within <a> tags within a <div> of the class “post”.
.post a img {
/* This centers the image */
display: block;
margin-left: auto;
margin-right: auto;
/* This adds the border */
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
background-color:white;
}
It is really just a bevel but the width and colour differences trick the eye into seeing something that more closely resembles a drop shadow.
Above is a stand alone example page and sample image.
April 17th, 2007 at 7:07 am
Hey… this is a nice trick.. thanks for sharing..
June 13th, 2007 at 5:36 pm
Great. I’m in the process of making a small cms. Let’s see if I can work this in. Thanks
December 31st, 2007 at 8:39 am
Thanks for this. I’ve been looking for a nice style to add to the header images of my posts. I modified this to have its own class so that I could apply it to only the images I wanted it on.
It’s just been implemented on my website at http://www.gluglu.co.uk
Thanks again!
March 5th, 2008 at 5:07 pm
Just wanted to say ta for this, just what I was looking for
March 23rd, 2008 at 9:18 pm
Thank you for the tip. I have already applied the border to the pics on my blog. Thanks again!
April 22nd, 2008 at 4:52 am
Thanks for the great tip. Cool one.
April 24th, 2008 at 10:46 am
Hi,
I’m impressed! Trying it out on travelblog.com.
Thanks, Brian
April 29th, 2008 at 4:41 am
I really like this dropshadow effect but could you please write out the whole code for me I am somewhat new to this
thanks
April 29th, 2008 at 7:52 am
It is hard to just “write it all” without knowing exactly what you need.
For example, you can apply a style to any object in your page, like I have done on my page to show the example image.
If you view the source of this page you will find the following.
<img src="http://notions.okuda.ca/wp-conten/uploads/2006/10/matthew-pumpkin-original.jpg" style="display: block; margin-left: auto; margin-right: auto; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" />That is the img tag showing the image and the inline style of how it should look (using the same rules shown above).
If you want it to affect all the images on your web site then you should use a style sheet or a style element. The source provided above is what I use on a different wordpress blog to apply the style to all images within an <a> anchor that are part of a post. The appropriate style will depend on the contents of the web site and how you want it to apply.
Here are some references that may help.
http://www.w3.org/TR/REC-html40/present/styles.html
http://www.w3schools.com/Css/css_intro.asp
May 19th, 2008 at 7:13 am
Thank you Poco. This will be useful for my website. It looks great.
July 23rd, 2008 at 9:00 pm
I get the border but not the padding. I cut-n-pasted your sample code above the download (below the example)… I use Max HTML Beauty which renders a sample of the page using IE 7.0.
Any help would be appreciated!
Jonathan
October 17th, 2008 at 2:01 am
Thanks a lot for sharing the information.. Its too cool
January 5th, 2009 at 8:35 pm
Thank you very much, I’m using this on my site and it really has a nice look!
May 21st, 2009 at 2:39 pm
Thank-you! This is a very simple and effective image border!
June 1st, 2009 at 9:36 am
thamk you very much for this information. it’s a vety nice border indeed
July 30th, 2009 at 9:05 am
Thanks!..i was looking all over the place for something simple, yet efficient like this solution.
October 19th, 2009 at 9:02 pm
Hi,
Thanks for share, i have use this trick in my blog.
October 28th, 2009 at 8:21 am
[...] Cool CSS Image Border Style http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/ [...]
November 25th, 2009 at 3:34 pm
very cool! thank you so much for sharing! i am using this!