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
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

6 comments:

Amit said...

this is just awesome

Brad said...

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

Fred said...

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!

Suprotim Agarwal said...

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

setur said...

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

Aadi said...

Its giving error on IE10 with document mode Standard