Rounded corner and CSS3 Gradient with border

02 / Jul / 2010 by Umar 0 comments

First download these files:
http://code.jquery.com/jquery-1.4.2.min.js

You can round corner DIV, LI tags and others
You add a class where you want round corner

Add this CSS:

.cornerBox ul li.corner{zoom:1;border:0;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1f858f',EndColorstr='#329ba6');background:-webkit-gradient(linear, left top, left bottom, from(#1f858f), to(#329ba6));background:-moz-linear-gradient(top, #1f858f, #329ba6);background:#1f858f;}
.cornerBox ul div.outer {background:#fff;padding:0;margin-top:15px;}

Add this jQuery code:

 $(function(){
		 $('.corner').wrap('

');
		$('.corner').corner("round 3px").parent().css('padding', '1px').corner("round 3px")
		    });

Hope this helps !!

Umar Pahat
umar@intelligrape.com
http://www.tothenew.com

FOUND THIS USEFUL? SHARE IT

Leave a Reply

Your email address will not be published. Required fields are marked *