Home · Web Design · Nifty Corners

Nifty Corners

The W3C has provided a property in CSS-3 called border-radius, which (according to the spec) is supposed to finally allow us designers to not need to use images to create the effect of having curved edges on boxes anymore. And this is great!

The only problem is that border-radius is universally UN-supported outside of Safari beta 3, and until it has better browser support, most of us will continue to use images for curved edges, but, a guy named Alessandro Fulciniti decided to do otherwise...

He came up with a brilliant JavaScript alternative, called Nifty Corners. (Now called Nifty Cube). Here is one such example.

With just a few lines of required CSS, and a <script> call to a nifty.js file you can have curved edges on any div element you choose. No opening up of an image editor, no GIF or JPEG decision to make, no "save for web" required.

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script> <script type="text/javascript">
window.onload=function(){
  if(!NiftyCheck())
  return;
  Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script> <div id="nifty">
Hello. I'm a curved box.
</div>

Here's a few more details on how the Rounded() function shown above works, taken from the Nifty Corners web site.

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:

  1. A CSS selector that indicates on wich elements apply the function
  2. Outer color of the rounded corners
  3. Inner color of the rounded corners
  4. An optional fourth parameter, that if is set to "small" would render small Nifty Corners

The only downside to using this that I can see, is the fact that it didn't degrade too well in IE5.5. (And forget about IE5.0) But still though, this is new and innovative. And he may be working on a fix as I type this blog entry... If you'd rather use this method until border-radius is supported thats entirely up to you. Happy coding!

Related URLs:

Jul 20, 2007

Comments

This article hasn't been commented yet.

Write a comment

* = required field

:

:

:


9 + 3 =