How to add border around image without destroying layout?

Site: is here

picture html:

<img alt="" src="UserFiles/Image/galerie/12开发者_Go百科970854473D-Eco-60.jpg">

when I add border: 2px solid black; to the image

layout breaks...

The only straight-forward solution to your problem that I can see is

outline: 2px solid black

which is layout neutral. However, it doesn't work in IE < 8.

For the record, an alternative:

border: 2px solid black;
margin:-2px;

First you add 2px to all sides, and then you pull them back in with the negative margin.

You can use CSS Clip, and apply the border around the clipped image;

I tried using margin: -2px, but it did not work for me.

Warning, CSS clip is pretty counter intuitive, and while it shares the a similar shorthand for margin and padding, it's pixel value assignments are extremely different compared to margin or padding.

Here are some helpful links;

1. Covers outline, and negative margin fix http://css-tricks.com/2368-image-rollover-borders-that-do-not-change-layout/

2. CSS Clip http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html