Abgerundete Ecken auf Bilder

Question

http://jsfiddle.net/48Y37/

Ich mag abgerundete Ecken an beiden Ecken an der Spitze des Bildes. Es ist technisch da, aber wird von dem Bild bedeckt. Ich habe über das ganze Web geschaut und ich habe Leute gesehen, die über overflow: hidden; oder sogar JavaScript (was ich so viel wie möglich vermeiden möchte) sprechen, aber ich schien nie in der Lage zu sein, es in meinen bestehenden Code zu implementieren.

Vielen Dank im Voraus.

<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

Sie benötigen einen border-radius zu diesem Bild hinzuzufügen: http://jsfiddle.net/WouterJ/48Y37/1/

Answer 2

das eigentliche Bild zu vervollständigen, müssen Sie sicherstellen, dass die Klasse des <img> Tag tatsächlich das hat Eigentum. Zum Beispiel:

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

und die entsprechenden CSS würde wie folgt aussehen:

.roundrect { 
border-radius: 15px; 
} 

Answer 3

1. Kopieren Sie das Bild mit Snipping Tool und fügen Sie ihn in Farbe.
2. Wählen Sie die abgerundete Rechteckform und ändern Sie die Farbe in weiß.
3. Wählen Sie die größte Größe für das Rechteck.
4. Dann legen Sie den weißen abgerundeten Rand um das Bild.
5. Dann kopieren und paste das gerundete Bild, wo immer Sie es brauchen.