Question

I’m wondering if it’s possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don’t want to use that).

img http://img265.imageshack.us/img265/192/version203.jpg

Answer 1

It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.

A simple example of CSS:

span.imgbox {
    background: #CCC;
    background-clip: padding-box;
    border: 3px double #CCC;
    border-radius: 3px;
    display: inline-block;
    padding: 10px;
}
span.imgbox > img {
    border: 1px solid #FFF;
}

This is generally what would be involved, assuming you don’t want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.