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.






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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!

Anonymous said...

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

Aadi said...

Its giving error on IE10 with document mode Standard