Rounded Corners

A big trend with web design right now is rounded corners on most rectangles. This is understandable, because when I am doing woodwork I smooth the edges, it just gives it a much more finished look, compared to rough or pointy edges. Not to mention in an artistic sense it both keeps the users eye path from moving around as much and helps the page as a whole blend. Corners tend to point in a direction or cause a UI element to stand out. Of course this is all contingent on how the page is designed.

Still I have done rounded corners for other sites with a brute force method, with separate positioning for both Firefox/Safari & IE7 because they rarely are the same. It looked good, but was annoying to implement, and that was only two corners, four would be much worse. Luckily there are now some options that make the job much easier. However there seems to be a big debate on what is the better method to use. One is raw css positioning like I had done, more work, but the benefit is low load times, just what the corner images need. The other way is with javascript I found Nifty Cube, a very simple and easy to use javascript engine that does all the work for you. The problem is that it loads after the page, and takes a small chuck of the users processing to run. This was not that big a lose so I was happy with the results.

Check it out if you need round corners, still not perfect, in the fact that it only does solid colors, however the only issue I have had is that it draws the corners across the top and bottom, so you need to pad divs by about 10px for it to work out.