Rounded corners on images

Question

http://jsfiddle.net/48Y37/

I want rounded corners on both corners at the top of the image. It technically is there but is being covered by the image. I've looked all over the web and I've seen people talk about overflow: hidden; or even JavaScript (which I want to avoid as much as possible) but I never seemed to be able to implement it onto my existing piece of code.

Thanks in advance.

<section class="container">
    <header>
        <img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" />
    </header>
    <section class="body">
        Lorem ipsum blahblah I don't know the rest.
    </section>
</section>

CSS:

header {
    width: 640px;
    margin-left: -10px;
    margin-top: -10px;
}
section.container {
    background: #fff;
    width: 620px;
    margin: auto;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 20px #888;
}
section.body {
    margin-top:10px;
}

Answer 1

You need to add a border-radius to that image: http://jsfiddle.net/WouterJ/48Y37/1/

Answer 2

To round the actual image, you have to make sure that the <img> tag's class actually has the border-radius property. For example:

<img class="roundrect" src="/whatever-your-source-is.png">

And the corresponding CSS would look like this:

.roundrect {
border-radius: 15px;
}