Round Boxes with Curvy Corners

CurvyCorners

Let's see a show of hands. How many of you have ever wished you could create rounded corners for your css boxes on the fly, without having to create a different .gif image each time? Me, too. Fortunately, it can be done with a free, open-source script called CurvyCorners. The curent version as of this writing is 1.0. Let's take a look at this little rascal and see what it can do for us.

First of all, you don't need to know any JavaScript to make this thing work. Just download it and call it up from the head of your html document. The script applies it's effect to any div that includes a radius command within it, as well as the supporting code that tells the JavaScript how to style the corners. The background-color declaration must be included inline. The border command will also only work inline, but you can remove that declaration if you don't want a border.

You could also define the dimensions and position of the box within that same style code. What's better (and is recommended by the authors of CurvyCorners) is to place the above div within another div, and call up the style code from the outer one. This script just seems to work better within multiple divs.

So how does it work in a real-life web page? Like a charm, once you get the hang of how to put it all together. You see, although you don't need to know any JavaScript to use this, you do need to have a good working knowledge of css to put it to practical use. For example, you can't apply a padding declaration directly to the div, which means that your content might butt up against the edges of the box in ways you don't want. I found that it was necessary to insert yet another div within the inside box and set the padding from there. It's something of a hack, but you can get it to work that way. And, there's something of a learning curve with it, which is to be expected with anything useful. For example, I soon realized that any problems I was having was usually due to padding and margin settings being inherited from the parent class or id. I found that I could fix this by setting margins and padding to zero within that particular div.

Once it all comes together, you do have some well-crafted rounded corners on your div boxes. I've seen other similar attempts to round corners using a combination of JavaScript and css, but they just don't work as well as this one. The corners this script produces are very smooth due to it's anti-aliasing features. You can't tell you're not looking at .gif images. This is one of the better open-source scripts out there right now.

You can get a lot of your questions answered by browsing their website. They include updates, instructions for implementing the script, as well as a comment feature for you to post questions and interact with the script authors. This blog-like comment feature works, but you have to scroll through a long line of comments to see questions being answered. A forum format might work better, and would allow experienced users to interact with others who are new to the script. But that's being nit-picky. You will probably find the answer to your questions in their existing comments.

What I like:

• Good, clean JavaScript called up from an external document
• Relatively small file, about 25k
  
• Corners are anti-aliased
• Degrades nicely in browsers with no JavaScript
• Cross-browser support
• Online documentation and support
  

What I could do without:

• Corners styled via inline commands, rather than being called up from an external style sheet
• Use of non-standard code within the html document: "Radius", which is actually defined in the JavaScript code, but causes the html page to be invalid.

The creators of CurvyCorners say that these last two items are going to be fixed in the next version, 1.2. When that happens, I will update this review accordingly.

Bottom Line: If you're more comfortable coding than graphic design, you need to have this script in your arsenal of web design tools.