Nifty Corners

Nifty Corners is a clever trick that lets you make rounded corners without images. No, you don’t need CSS3 either. The trickery is moved to an external JavaScript file to keep the markup clean. Nice.

Posted on March 15, 2005 in CSS, JavaScript, Quicklinks

Comments

  1. March 16, 2005 by Clint

    This method is nice and clean. It didn’t account for if you wanted a rounded border itself though; only rounded backgrounds.

    I was able to edit the code pretty easily and use it to make rounded borders. That cleaned out a huge chunk from my CSS. Thanks of the tip.

  2. What do you mean by “rounded border”? I know rounded coner, but what’s rounded border?

  3. Rounded border probably is just like a normal border, but rounded :)

    I have (what I would call) rounded borders on one my sites. Notice the heading background, rounder corner with a rounded border. Yes, it is not a very pretty rounded border, but that’s beside the point ;)

  4. To Clint: I just posted over at Webgraphics about the same border plight that I was having with this example. Grant was nice enough to point me over here to see what you’ve come up with. Would you mind sharing an example of your rounded borders? I wasn’t able to get the tops and bottoms less than 5px (left and right margins were easy). I thank you in advance.

  5. Justin: Ah yes, now I understand. Thanks for that.

    Clint: I would also be interested in seeing how you achieved the rounded background and border effect.

  6. I’m tring to wrap my head around how I could just change the Javascript to get a border to work. I can do a border by emnbedding multiple divs…

    Here are some examples

    But a 2px thick border would be a lot more appealing. I’ve got my graph paper out and everything and I have a feeling it’s a bit more complex then on first inspection.

  7. I almost got it, but there’s just a little boxiness on the top and bottom (looks like it needs one more element).

    Anyway, give this one a gander, one would still need to adapt the CSS to the Javascript.

  8. That is supposed to read: Looks like it needs one more <b> element

    Got to fix that Roger ;)

  9. Justin - a very good attempt… but how well can it handle 2px thick borders?

  10. That’s a good question. I would have to spend more time on it (which I don’t have). Maybe a guru like Roger can lend us a hand (nudge nudge, wink wink).

    To summarize, this was my first attempt and this is the problem (magnified).

    This is a stab at fixing it (adding a 4th element) and this is the problem with that approach (magnified).

    Ideas?

  11. That is definitely very clever, and a much nicer way of doing things than relying browser specific styling or images. But doesn’t the need to specify the colour of the corners in the function call go against the separation of content, layout and behaviour?

    If I get time I’ll see if I can do anything about that over the weekend.

  12. Not a scalable solution (only looks good with a 1px border), but does look OK. The top and bottom element kept getting a 2px height, I had to force the height to 1px by setting the height to 0 (with a 1px border). You would need to adapt Alessandro’s Javascript to work with the border version though as I didn’t even want to go there.

    Tested in Firefox and IE6, looked good.

  13. Nifty indeed! I wish i had seen it some time ago.

  14. Just use -moz-border-radius and let IE suffer!

  15. This looks like a really cool solution, but on my site, at least (see this page for an example), the rounded corners seem to display as an afterthought, after everything else on the page has already loaded. Does anyone have any idea why this might be happening, or how one might fix it? (Happens with both Windows Firefox and IE.)

  16. Karl, That is happening because the rounded corners do not get added until the page is completely loaded. By completely loaded, this means all the inline images (as opposed to CSS background images) and any external javascript files.

    Your page seems quite heavy with inline images, you might want to move those into a CSS file (as background images) if they are not explicitly part of the content.

    You can also speed up the process of adding the rounded corners by calling the function at the bottom of the page (in addition to the onload call).

    The library Javascript file would need to be altered as well as your inline Javascript call. It’s out of the scope of this discussion, but I would be happy to help you via email. Contact me through my website if you’d like help.

  17. March 29, 2005 by Jason L.

    I came across someone who has modified the nifty code and added anti-aliasing and more:

    http://www.acko.net/anti-aliased-nifty-corners

    Appears only to work on mozilla, but still quite cool. This technique may help with previous posts in regard to improving the quality of the rounded borders.

  18. March 31, 2005 by Roger Johansson (Author comment)

    Jason: That looks interesting, and it works in Safari too.

  19. Karl,

    You can make the javascript required to add your borders execute before the browser has initially rendered the page by simply adding your javascript to a script tag at the bottom of your page between the /body and /html tags. This way it will execute as soon as the html portion of your page has finished downloading instead waiting for all your images to load.

  20. Karl (or anyone else), how exactly do you “adding your javascript to a script tag at the bottom of your page between the /body and /html tags.”

    Sorry buy i’m not so good with javascript!

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.