CSS3 rounded image corners not working in Safari/Chrome?

I've merrily hacking away at this websit开发者_StackOverflowe, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I've just discovered they don't.

In FF and IE9 I see this:

In Safari/Chrome I see this:

Here's the HTML:

<div class="container">
    <div>
        <img src="static/images/image1.jpg" alt="" />
    </div>

Here's the CSS:

  .container {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
  }

What am I doing wrong? :(

UPDATE

Please see a working example of the problem I'm having: http://jsfiddle.net/jAsnU/3 Thanks.

try:

.container img {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
}

Try adding "overflow:hidden;" to the style of the div. I made a quick test page up at jsfiddle and it seemed to work (tested it in Chrome, Safari and FireFox): http://jsfiddle.net/wabw8/

You might want to try to set the border radius on .container div img.

I think you need to specify a border.

So, something like this:

border:1px solid blue; //whatever blue you are using.

It looks as though FF and IE are giving you the rounded border... but as a blank item that is cutting off the image.