Coins arrondis sur les images

http://jsfiddle.net/48Y37/

Je veux des coins arrondis sur les deux coins en haut de l'image. Il est techniquement là, mais est recouverte par l'image. J'ai regardé sur le web et j'ai vu des gens parler de overflow: hidden; ou même JavaScript (qui je veux éviter autant que possible), mais je n'ai jamais semblé être en mesure de mettre sur mon morceau de code.

Merci d'avance.

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

source d'informationauteur Jeremy Ahn

  1. 14

    Vous avez besoin d'ajouter un border-radius à cette image: http://jsfiddle.net/WouterJ/48Y37/1/

  2. 7

    À tour l'image réelle, vous devez vous assurer que le <img> de l'étiquette de la classe fait a la border-radius de la propriété. Par exemple:

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

    Et le CSS correspondant devrait ressembler à ceci:

    .roundrect {
border-radius: 15px;
}
  3. -2
    1. Copie de l'image avec l'Outil Capture et les coller dans Peinture.
    2. Choisissez le Rectangle Arrondi de la forme et de changer la couleur de blanc.
    3. Choisissez la plus grande taille du Rectangle.
    4. Puis mettre le blanc arrondi bordure autour de l'image.
    5. Puis copie et coller l'arrondi de l'image là où vous en avez besoin.