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.
- Previous post: CSS tips and tricks, Part 1
- Next post: DOM-Scripted Lists
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
What do you mean by "rounded border"? I know rounded coner, but what's rounded border?
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 ;)
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.
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.
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.
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.
That is supposed to read: Looks like it needs one more <b> element
Got to fix that Roger ;)
Justin - a very good attempt... but how well can it handle 2px thick borders?
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?
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.
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.
Nifty indeed! I wish i had seen it some time ago.
Just use -moz-border-radius and let IE suffer!
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.)
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.
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.
Jason: That looks interesting, and it works in Safari too.
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.
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!
Sorry, comments are closed for this post.