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

Answer 3

1. Copy the picture with Snipping Tool and paste into Paint.
2. Choose the Rounded Rectangle shape and change the color to white.
3. Choose the largest size for the Rectangle.
4. Then put the white rounded border around the picture.
5. Then copy and paste the rounded picture wherever you need it.