Rounded corner and CSS3 Gradient with border « Intelligrape Groovy & Grails Blogs

Rounded corner and CSS3 Gradient with border

Posted by umar

First download these files:
http://code.jquery.com/jquery-1.4.2.min.js
http://codelab.jomvideo.com/javascript/curvycorners-2.1-BETA/curvycorners.src.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.intelligrape.com

  • Share/Bookmark
This entry was posted on July 2nd, 2010 at 8:01 pm and is filed under HTML-UI-CSS, Javascript/Ajax/JQuery . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Rounded corner and CSS3 Gradient with border”

Leave a Reply