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;
}