Rounded Corners with the Cornerz jQuery plugin




I found a useful plugin created by Johan Fox to create rounded corners with ease. The output looked consistent in most of the latest browsers I tested it on. You can download the plugin over here. Here’s how to use this plugin in your applications:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1">
<
title>Cornerz Plugin</title>
<
script language="javascript" type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</
script>
<
script language="javascript" type="text/javascript"
src="http://github.com/weepy/cornerz/raw/master/cornerz.js">
</
script>
<
style type="text/css">
.cordiv{
height: 200px;
width: 200px;
background-color:Blue;
}
</style>
<
script type="text/javascript">
$(function() {
$('#divOne').cornerz();
$('#divTwo').cornerz({
radius: 45
});
});
</script>
</
head>
<
body>
<
form id="form1">
<
div>
<
div id="divOne" class="cordiv">
</
div>
<
br /><br /><br />
<
div id="divTwo" class="cordiv">
</
div>
</
div>
</
form>
</
body>
</
html>


OUTPUT

Rounded Corners

See a Live Demo

Note: You may experience a lag before the corners are shown. To avoid the lag, download the cornerz plugin on your local machine and then reference it from there.



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

6 Responses to "Rounded Corners with the Cornerz jQuery plugin"
  1. Amit said...
    February 16, 2010 at 9:55 AM

    this is just awesome

  2. Brad said...
    March 1, 2010 at 6:37 AM

    Positioning is off in IE7. Box content is shifted to the right.

  3. Fred said...
    July 8, 2010 at 2:47 PM

    the demo doesnt seem to work. why is the script not documented at all?? wow.

    i can't see the visual verification code?


    FU - k!

  4. Suprotim Agarwal said...
    July 8, 2010 at 5:41 PM

    I just cross checked the demo on IE8 as well as Firefox. Works just fine!

  5. setur said...
    November 18, 2010 at 11:26 PM

    how can only top-right and top-left side corner

  6. Aadi said...
    September 13, 2013 at 5:29 AM

    Its giving error on IE10 with document mode Standard

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions