Home

Anti-aliased Nifty Corners

Apr 05, 2005

Note: Updated to work on IE6.

Dries pointed me to a nifty article which shows how to add rounded corners dynamically through JavaScript, without requiring images.

While the idea is cool, the implementation was rather limited, as the corners still had to be specified in CSS by hand.

So I modified it so the widths are calculated in the JavaScript instead. It now accepts any radius parameter and even allows elliptic corners. And once I got this far, well, adding anti-aliasing was really the obvious next step ;). So now we've got dynamic, anti-aliased and flexible corners.

The code is not very optimized, but then I've never done a real rasterizer before, and Javascript isn't the best of languages for stuff like this.

Unfortunately there's still a weird bug in the pixel coverage calculation (see nifty.js), but it's hardly noticeable. If anyone figures out why, let me know.

Feel free to use this in any way you want, though please give credit where credit is due.

AttachmentSize
nifty-aa.html1005 bytes
nifty.js6.64 KB

wow divs

Apr 04, 2005 drumm@drupal.org

Do those hurt perfomance noticeably? I think borders be used to do a version with three colors per line (background, blend, foreground) in the same number of tags as the height. Wouldn't be as smooth, but it might make up for the in efficiency.

Not noticably

Apr 04, 2005 Steven

I haven't tried it on a big site, but overall it doesn't seem to be a big problem. I'm afraid reducing the amount of colors will quickly make it look pixelized.

The code isn't very optimized, so it's not advised for large radiuses either.

error/bug with Internet Explorer

Apr 05, 2005 Andea Paiola

Nice script, but with Internet Explorer it's all stretch in vertical...
How I can solve the problem? And it's a BIG problem...
Help me!
Best regards, Andrea Paiola.

Fixed

Apr 06, 2005 Steven

I fixed it a while ago. It should work on IE6 already.

Integration with Drupal?

Apr 17, 2005 Dave Kaufman

Any thoughts on integrating this into a drupal theme?

Proof of concept only

Apr 17, 2005 Steven

It's not much more than a proof of concept. But still, integrating anything into a Drupal theme is no more difficult than integrating it into a static XHTML site.

Very nice

Apr 20, 2005 Pachollini

Your anti-aliasing works very nice! Shame I forgot all the math since i left high school, anyway, I have to look at it!

Some extension

Jun 06, 2005 AdaskoTheBeAsT

Hello,
module is great.
Would you add border generation to it?
Then it will be most powerfull rounded corners generation script I've ever seen :)

Best regards

Anti-aliased Nifty Corners

Jun 22, 2005 Pat

You're code is excellent. But, it is not printing well on a laser printer. This is my only suggestion.

changed your code for more flexibility

Jul 01, 2005 Michael

just curios if you want to know/check my changes to your code

i made it possible to set each corner individually

you can check an example here
my theme test site

-michael

Rounded border

Aug 03, 2005 Peter B

This is indeed excellent code, it's great to have the ability to set the size of the rounded border.

However, could you add the facility to have a rounded border as well, like the updated Nifty corners code does?

Cool

Sep 01, 2005 Jim

This should be cool to use - the only thing I've noticed is that the rounded div can't have a set height, only an auto height. Not too much of a prob, but it would be nice to have the option. Great though!

set each corner individually

Sep 08, 2005 Michael

someone asked for, so i remade my niftycorner experiment

its possible to set each corner
example site

http://www.langmi.de/files/niftycorners/nifty.html

Multiple boxes

Sep 10, 2005 Anonymous

Adjusting the size is a great flexibility!

Only yhing is that your script assumes that there is only one box in a page. It is very usual that multiple use of boxes is needed.

Nifty Coners on / with Many / Multiple / Arrayed DIVs

Sep 27, 2005 F1lT3R

I'm currently writting a Wiki Photo Album (it's almost finished). I use Nifty Corners in this album on multiple DIVs. The solution is actually very easy.

Rather than calling each DIV from an Java window.ONLOAD event in seperate script file; I add each new DIV much like an array.

First I pack the start of the JavaScript into a string. Then I echo the multiple DIVs to HTML and add the DIVs dynamicaly while in a loop.

<?php
For ($DIV_ID = 1, $DIV_ID = 3, $DIV_ID += 1) {
    
$nifty_script .= "Rounded('div#whatever$DIV_ID...');\n";
          echo <
div id='whatever$DIV_ID'></div>
}
?>

This means that the $DIV_ID places a new number into your Javascript String for every time it loops through the code. After you've added your multiple DIVs, close your Java Script function and call it by echoing it to HTML.

Then just use PHP to echo this HTML side...

<?php
echo $nifty_script;
?>

An there you go... Nifty will now call all DIVS individually, with the appearence of nifty running an array.

No transparency

Oct 07, 2005 Bill

It appears your scripts do not take into account transparent colors. The nice thing about the nifty corners solution (at leas the version I have) is that you could specify transparent around the corners so that whatever was "behind" the region would show through. This is a feature that is gravely lacking from this otherwise great script.

Opacity

Oct 09, 2005 Steven

Well I suppose you could go crazy and use browser support for opacity to do that. But it would probably slow it down even more.

Is it possible to use this script with two boxes on a page?

Oct 31, 2005 Chris Rex

Hi,

This looks great, but it is possible to use your script with two boxes on a page?

Regards,

Chris

Yes.

Oct 31, 2005 Steven

 

Bugfixes! :)

Dec 21, 2005 Jacob

First of all.. nice script!

I spent a few hours toying with it, and solved the weird bug in the antialiasing as well as another that manifests itself when using colors with R, G or B values < 0x10.

First, the antialiasing:

// First in a run
arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;
coverage = (arc2 - (sizey - i)) * (arc - n_fg - n_aa + 1) * .5;
// Coverage is incorrect. Why?
coverage = 0;

The problem is the way arc2 is calculated - try this instead:

arc2 = Math.sqrt(1.0 - Math.sqr(1.0 - (n_bg + 1) / sizex)) * sizey;

..and don't forget to comment out "coverage = 0" ;)

Second fix is for the Blend() function. When concatenating the return string, R, B or G values < 0x10 will corrupt the string because of missing characters. The fix is to put a '0' at the beginning of each color and then keep the last two chars of each color:

function Blend(a, b, alpha) {
  if (alpha < 0 || alpha > 1) {
    document.write("Illegal alpha value: " + alpha);
  }
  var ca = Array(
    parseInt('0x' + a.substring(1, 3)),
    parseInt('0x' + a.substring(3, 5)),
    parseInt('0x' + a.substring(5, 7))
  );
  var cb = Array(
    parseInt('0x' + b.substring(1, 3)),
    parseInt('0x' + b.substring(3, 5)),
    parseInt('0x' + b.substring(5, 7))
  );
  r = '0' + Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16);
  g = '0' + Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16);
  b = '0' + Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16);
  return '#'
    + r.substring(r.length - 2)
    + g.substring(g.length - 2)
    + b.substring(b.length - 2);
}

Borders, borders, borders...

Dec 23, 2005 Ofer P

Anybody implemented borders on the script?
I am trying to use it and this will be a big plus to it
if it was there.

Thanks for that slick nice piece of code.

Anti-Aliased with user defined Radius Rounded Corners & Borders!

Jan 18, 2006 Cameron Cooke

Hi,

I thought that I would share with you guys a script that I and a friend wrote.

Features:

1) Anti-Aliased Corners
2) Border Support. (Anti-Aliased both sides, any width and colour borders)
3) Object based. (OO JavaScript)
4) User Definded Radius
5) Apply to individual corners.

Roadmap:

1) Optimisation (Speed Speed and more Speed.)
2) Transparent Corner Support
3) Drop Shadows
4) Wiggly borders (just for fun)

Check it out:

www.roundedcorners.net

We still have a lot of work to do, speed is currently an issue but I am going to optimise the code somewhat. The current version is alpha code.

No-AA, slow?

Jan 19, 2006 Steven

I tried yours, it's certainly a lot cleaner than mine code-wise, but the anti-aliasing doesn't seem to work (I use Safari) and it takes ages for relatively small sizes.

Rounded Corners

Jan 20, 2006 Cameron Cooke

Yeah, the version of the site at the moment, is an early version. We currently have much newer version in development. Anti-Alising will be fixed and should work on all browsers soon.

Speed is a major issue at the moment, it takes about 1 second to render the demo site page on my 64bit 3200Mhz cpu, but I find most of the time it takes about 4 seconds on average pc's.

The current demo script, does render perfectly on IE 6 for PC with anti-aliasing tho.

I need to look at where the bottle neck is in the script. It could be the generation of the anti-aliasing pixels.
On a 20 pixel radius for one corner it currently has to generate 60 pixels, which is quite a lot of work for the browser.

it's perfect, is there any

Feb 25, 2006 goetsu

it's perfect, is there any solution to make it work with ie5 and ie5.5?

RuzeeBorders

Mar 02, 2006 Steffen Rusitschka

Check out the RuzeeBorders at http://www.ruzee.com/wordpress/ruzeeborders/. They support shadows, glow effects, borders, and of course rounded corners. Plus: Style auto-detection.

New version of Nifty Corners

Jul 19, 2006 Octoberdan

The author released a new version http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/

Do you plan on modifying it? If so, I'd grealty appreciate you letting me know. Thank you!

Nifty Corners in IE 6 and 7

Aug 21, 2006 Taryn Merrick

I can't seem to get the Nifty Corners script to work on this site ( http://www.bestofindianashville.com ) in IE6 and 7. If anyone can point me in the right direction, I'd be grateful. Thanks :-) I so do wish there was a forum for Nifty Corners!

Single border around multiple divs

Sep 20, 2006 Andrew

Hi

I have been playing with Nifty corners to create a keyline with round corners around a div and it works really well. What I would like to do is wrap two divs with a single keyline but am stumped. Is it possible?

Regards

Andrew

how can i use this with a fixed height div

Oct 10, 2006 stephen

hi,
very nice effect. i want to have rows of boxes of a certain height and give them rounded corners. how can this be done?

thanks
stephen

Good experience with Nifty

Dec 15, 2006 Alex

Don't forget to use the latest version of Nifty: Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html). Nifty worked like a charm for my site (http://www.cocktailbuilder.com).

Despite criticism by some (http://www.sproutit.com/articles/bigact/515), I want to share my good experience. Some specific points:

1) Cross-browser compat: I tested on IE6, 7, Firefox 1.5, 2.0, and Safari 2 - all work well. And I do use absolute positioning and lots of client-side JS.

2) About quality of corners: I think noone will notice the difference for small-ish corners between Photoshop-generated corners and JS corners, really. And man, it's painful to generate these things in Photoshop! Plus, it costs money.

3) About size of JS: you need to use a tool like JSMin or Packer (http://dean.edwards.name/packer/) to compress your JS. Besides, if GZip is enabled on the HTTP server, JS is just text that is compressed well; images aren't. Plus, if you have 5+ elements that you want pretty corners for, size advantage becomes obvious.

BUGS or What ??

Jan 07, 2007 Anonymous

I don't know why, but this script isn't working properly in my company website. We develop a website on ASP.NET and i'm working for newsletter template using this script to make a rounded corner for those newsletter, and add the script programatically "on the fly" to make the layout preview. I use a ASP.NET literal control to make it happen, but it's doesn't show the right layout in both IE. 6 and mozilla 1.5. Could anyone give my some advice on this???

Thanks
iandra

great work

Jan 21, 2007 gjohansson

Hey Steven! I found your nifty corners to be the best given the antialiasing features and so I just wanted to tell you that I used your nifty corners at agent55.com! So what if it takes a little time to calculate? As mentioned earlier a border feature would really be cool. Is that possible? - thanks again!

Hei! Great stuff. Works

Sep 03, 2007 Henk

Hei!

Great stuff. Works like a charm.

Thank you so much!

Applying to multiple divs

Nov 01, 2007 Danz

When adding multiple divs to a page, only the first div is styled.

Seems to me that the javascript should be redesigned so that all divs (eg with the name "div#nifty") should get the rounded corners (not just the first one).

Or maybe there is already a built-in way I didnt see?

I'm calling the function twice, ie:

Nifty("div#niftyABC", "#377CB1", "#9BD1FA", 30, 30);
Nifty("div#niftyDEF", "#377CB1", "#9BD1FA", 30, 30);

(need to change the div names and update the css for each div).

Otherwise, great stuff!

Page load

Nov 10, 2007 Danz

If doing more than 3 rounded tables on a page, the javascript is horribly slow. Even though it is done client side (by the browser), it would be better to use css with background images (unless there is a way to get the js to apply to all tables without separate calls... Steven?).

So this is great for 1 or 2 tables, but not more than that!

IE7 no go

Feb 17, 2008 Carl

Ignore my last comment. That was another error. The error I'm getting in IE7 related to your javascript code is an execution error at line 100 talking about an invalid property value.

Thanks

May 15, 2008 Staysee

I'm no coder but from a designers view this is great - a timesaver and therefore more time away from computer!

thankyou for sharing this

Transparency

Jun 29, 2008 Petah

I made a quick hack to the script in order to support transparency on IE7 and since I couldn't find any other script that could dynamically create variable sized rounded corners with transparency that works on FF and IE I thought people might want to know...

All you need to do is comment out 2 lines of code in the AddTop and AddBottom functions
//d.style.backgroundColor = bk;

This will however make a mess of the corners due to the background color of your div's...
So you will have to add another div container for inside your rounded corner div and set the background color of that...

Hope this helps people

The zoom behavior of your

Jul 07, 2008 Anonymous

The zoom behavior of your demo page is different in IE7 -v- FF3. IE7 looks right while FF3 becomes more squarelike, the more you zoom.

This is Crazy Cool!

Jul 17, 2008 People Search Dude

Great modification to this technique! I'm just curious on it hurting performance. Anyone know?

Now available as a jQuery plugin

Jul 22, 2008 David Turnbull

I used your anti-alias math to build a jQuery plugin. You can check it out at the jQuery plugins site: http://plugins.jquery.com/project/corners

Download latest version

Oct 03, 2008 Cosmin

Where can I download the latest version of anti-aliased nifty corners?
Moreover, have the tl, tr, bl, br options been removed?
Thanks.

it's perfect, is there any

Mar 01, 2009 jakk

it's perfect, is there any solution to make it work with ie5 and ie5.5?

ben - my blog

Great Share!

Mar 06, 2009 Just Another Googler

Thanks a lot for this, it will help me a lot on my way to wrapping my head around javascript.

p.s. Love your site design!

multiple

Mar 08, 2009 mafin

can understand how to use it for few DIV's. only work for 1st

Thanks for nifty

Apr 20, 2009 zahra ghavami

thanks a lot , that's wonderful and help me a lot .
thanks for sharing your information

To Danz

Jul 22, 2009 Marcelo

You cannot use the same ID to identify two different DIVs, because IDs are supposed to be unique.

When you have two elements in the page with the same ID, usually only the topmost element will be selected when referred to.

If there are many DIV elements which you want to Nifty() to in the page, I recommend using the DIV's class attribute:

<div class="niftythis">Content</div>
<div class="niftythis">More content...</div>
<div class="niftythis">Etc</div>

Then you refer to all elements at once like this:

Nifty("div.niftythis", "#377CB1", "#9BD1FA", 30, 30);

Identifying the corners in Nifty Corners Anti-Aliasing

Dec 02, 2009 Darrell Thompson

How can I identify which corner is which in the Nifty Corners Anti-Aliasing script. Looking over the anti-aliasing script - nice results, btw - I tried to figure it out but, I do not have enough experience with css and javascript to understand what I am looking at. I cannot distinguish which object is the TopLeft or which is the BottomRight. I want to add specific corner control to the script. I added background color but, that was straightforward and easily done in the initial paragraph. Any pointers are appreciated.

IE8

Mar 23, 2010 diana

I know this has been dead for a while but has anyone gotten this to work in IE8. I don't get the rounded corner effect. I have tried messing with the style.backgroundColor but can't get anything working.

Recent comments

Images