Question

Trying to add rounded corners to images, that also have a border.

Came up with the following:

http://jsfiddle.net/tgqBG/

But it doesn’t look good at all with the whitespace below the image, and the fact that the corners of the border and image don’t match. Am I doing something wrong?

Thanks,
Wesley

Answer 1

Add overflow:hidden; to .thumb_container, add vertical-align:bottom; to the image.

You can remove a lot of the other values, here is an updated jsfiddle:

http://jsfiddle.net/tgqBG/12/

Another way of doing this (supported by more browsers) is showing the image through background-image. In my comment I said this would pose a problem because the element needs fixed dimensions, however I just realized this can easily be fixed by also putting the image in there but hiding it.

http://jsfiddle.net/tgqBG/51/

This doesn’t work without float because it will get a width of 100%. This is because of div‘s automatic property to be rendered as a block.

To fix this, change div to span and then add display:inline-block;.

http://jsfiddle.net/tgqBG/52/