CSS3 rounded image corners not working in Safari/Chrome?

Question

I've merrily hacking away at this website, 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.

Answer 1

try:

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

Answer 2

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/