Cool CSS Image Border Style 46

This entry was posted in CSS on by

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.


CSS Border Sample

Above is a stand alone example page and sample image.

Leave a comment

Your email address will not be published. Required fields are marked *

 

46 thoughts on “Cool CSS Image Border Style”