Rounded Corners (Method 2)

Written by Mat on Friday, March 16, 2007 12:12 - 0 Comments

OK, so if you’ve tried my previous version of the rounded corner box, you’ll note that it has a few limitations:

the width of the box is limited to the size of the right-side images,
there are occasional hiccups in the code that cause the lower left image to not reach the bottom corner, and
it still requires manual imagery

So here’s another way you can consider tackling it. OK, so we’re borrowing a piece of (LGPL) code from another developer but I have successfully implemented this approach in several places, including this site.

Visit curvycorners.net to download the components you’ll need. After that it’s pretty simple. The code itself is DHTML so it combines a nice piece of Javascript with your XHTML-based code. Essentially it vectors the borders of your DIVs and rounds them out mathematically.

To begin, first add the script to your code:

<script type=”text/JavaScript” src=”rounded_corners.js”></script>

Next, create the DIV container that you want to add the rounded corners to:

<div id=”roundedDiv”></div>

Finally, in the <HEAD> portion of your HTML, add the following:

<script type=”text/JavaScript”>

  window.onload = function()

  {

    settings = {

      tl: { radius: 10 },

      tr: { radius: 10 },

      bl: { radius: 10 },

      br: { radius: 10 },

      antiAlias: true,

      autoPad: false

    }

    var divObj = document.getElementById(“roundedDiv”);

    var cornersObj = new curvyCorners(settings, divObj);

    cornersObj.applyCornersToAll();

  }

</script>

What I really like about this nifty code snippet is that it is extremely flexible:

turn the rounding on or off on a per-corner basis
each corner can have its own radius
anti-aliasing can be turned on or off
you can round corners on multiple DIVs by ID or class

Download it, set it up and mess around with it. One side note – there was a question at one point on how to implement a shadow for the box once you’d rounded it off. THINK! There’s two easy ways to do this – you can either script a second div that falls behind it offset by a few pixels, or you can use a shadow filter in your CSS. Students in the upcoming IMD223 (Advanced Scripting) – we’ll be learning how to do this!

By the way, like most GPL and LGPL scripts, if you end up implementing it, do the right thing and donate to the cause – this type of social morality is what keeps good code out on the Internet and available for developers like us to use.