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/