CSS3 Rounded corners on images

<style>
.round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
}
</style>

<img class='imgr' src='http://directory.naprej.com/image1.jpg' width='300' height='200' alt='Coconut palm leaf'>

<script>
window.addEvent('domready', function (){
    $$('.imgr').each(function(imgr){
        new Element('span', {
            'class': 'round',
            styles: {
                'background-image': 'url(' + imgr.getProperty('src') + ')',
                height: imgr.getProperty('height') + 'px',
                width: imgr.getProperty('width') + 'px'
				
            }
        }).wraps(imgr);
		
	$$('.round img').setStyle('opacity','0');
    });
});
</script>

view demo

Related Posts