छवियों पर गोलाकार कोने

Question

http://jsfiddle.net/48Y37/

मैं छवि के शीर्ष पर दोनों कोनों पर गोलाकार कोनों चाहते हैं। यह तकनीकी रूप से है लेकिन छवि द्वारा कवर किया जा रहा है। मैंने पूरे वेब पर देखा है और मैंने देखा है कि लोग overflow: hidden; या यहां तक ​​कि जावास्क्रिप्ट (जिसे मैं जितना संभव हो उससे बचाना चाहता हूं) के बारे में बात करता हूं लेकिन मैं इसे कोड के मौजूदा टुकड़े पर लागू करने में सक्षम नहीं था।

अग्रिम धन्यवाद।

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

सीएसएस:

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

आपको लगता है कि छवि के लिए एक border-radius जोड़ने की जरूरत: http://jsfiddle.net/WouterJ/48Y37/1/

Answer 2

वास्तविक छवि दौर के लिए, आपको यकीन है कि <img> टैग की क्लास वास्तव में है कि करना है border-radius संपत्ति।

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

और इसी सीएसएस इस प्रकार दिखाई देगा: उदाहरण के लिए:

.roundrect { 
border-radius: 15px; 
} 

Answer 3

1. कॉपी Snipping उपकरण के साथ चित्र और में पेस्ट पेंट।
2. गोलाकार आयताकार आकार चुनें और रंग को सफेद पर बदलें।
3. आयत के लिए सबसे बड़ा आकार चुनें।
4. फिर तस्वीर के चारों ओर सफेद गोलाकार सीमा डालें।
5. फिर कॉपी और पेस्ट जहां भी आपको इसकी आवश्यकता हो, गोल चित्र।