JCorner Round Corner

by Apple Ilagan

HTML

<script src="http://malsup.github.com/jquery.corner.js"></script>
<div id="main">  
<div class="demo roundfull"><img src="http://flaticons.net/icons/Banking/ATM.png"></div>
    <div class="demo roundfull"><a href="#"><img src="http://flaticons.net/icons/Application/Book-Close.png"></a></div>
<div class="demo roundfull"><img src="http://media1.onsugar.com/files/2013/01/03/3/192/1922153/f81eb3ae1d163ecf_BTV_HOWTO_Retro_Red_Carpet_Waves_2013_0116SQUARE/i/How-Get-Jennifer-Lopez-Sexy-Waves.png"></div>
    <div class="demo roundfull"><p>Circle4</p></div>
<div class="demo round">Round</div>
<div class="demo round">Round2</div>
<div class="demo round">Round3</div>
<div class="demo bevel">Bevel</div>	
<div class="demo bevel">Bevel</div>	
<div class="demo notch">Notch</div>	
<div class="demo notch">Notch2</div>	
<div class="demo notch">Notch3</div>	
<div class="demo notch">Notch4</div>
<div class="demo bite">Bite</div>
<div class="demo bite">Bite2</div>
</div> <!-- main -->

CSS

.demo, .inner { color: #000; text-align: center; font-family: verdana, arial, sans-serif;}
.demo  { float: left; width:100px; padding:5px; margin:5px; background: #6af; }
.roundfull{width:100px; height:100px; 
background:#333; color:#fff; border:5px #666 solid;
overflow:hidden;    
}
.roundfull img {height:110px; width:auto;}
.roundfull p {padding:25px 0;}

JavaScript

//DEMO >> http://jquery.malsup.com/corner/
$(function(){
		$('.round').corner();
    $('.roundfull').corner("100px");
        $('.bevel').corner('bevel');
        $('.notch').corner('notch');
        $('.bite').corner('bite');        
});