border-radius on images.. (rounded corners)

Trying to add rounded corner开发者_StackOverflow中文版s 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

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/

You should take into account that an element that is smaller than its container (the image) should have a smaller corner radius for it to be aligned with the outer elements corner radius (meaning have the same curvature). Try something like 15px for the image border-radius. That seems to work for your example.

Try this: http://jsfiddle.net/tgqBG/39/

The inner image is smaller, and thusly needs to have a smaller border-radius. Margins and paddings default to 0. Avoid floats like the plague. Vertical-Align:top alings the image correctly.