CSS rounded corners on an image problem

Question

I'm having trouble rounding the corners of an img using CSS3:

This is the code I'm using:

img.event-thumbimage {
    height:120px;
    width:140px;
    -webkit-box-shadow: 0px 0px 10px 0px #4d4d4d;
    -moz-box-shadow: 0px 0px 10px 0px #4d4d4d;
    box-shadow: 0px 0px 10px 0px #4d4d4d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;  
    border-radius: 8px;
    border:solid white 3px;
    float:left;
    margin-right:25px;
    }

As you can see, the outer border is rounded but the actual img is squared off. Using CSS3 how can I round the corners on the actual image as well?

Answer 1

use two containers, both with the rounded corners (not the img ), and don't forget the overflow: hidden on the inner:

example code here: http://jsfiddle.net/jackJoe/YhDXm/

Answer 2

A similar answer to the previous two. Use a span around the image and apply the border-radius to both.

There is a more detailed walkthrough here: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.

Answer 3

Put a <div> around the image and apply the border-radius to that wrapper. Add overflow: hidden; and you're good to go. This is because <img> tags can't have rounded corners.