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.

6 comments:

  1. AmitFebruary 16, 2010 at 9:55 AM

    this is just awesome

    ReplyDelete
  2. UnknownMarch 1, 2010 at 6:37 AM

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

    ReplyDelete
  3. FredJuly 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!

    ReplyDelete
  4. Suprotim AgarwalJuly 8, 2010 at 5:41 PM

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

    ReplyDelete
  5. AnonymousNovember 18, 2010 at 11:26 PM

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

    ReplyDelete
  6. favshireenSeptember 13, 2013 at 5:29 AM

    Its giving error on IE10 with document mode Standard

    ReplyDelete