Dec 15 2006
Rounded Corners in Web Sites...
At the moment this is an issue that requires compromise to done somewhat cleanly. Most webmasters will be unwilling to go the traditional “gifs in nested tables/divs” route as outlined in this MSDN article, and it’s fairly safe to assume that robust support of CSS3 is quite a ways off. There is a solid listing of current techniques at CSS-Discuss – this article will provide some brief analysis and structure as well as introduce a few more resources.
CSS-Centric Solution
If rounded corners are insignificant to the actual feel of the page, -moz-border-radius is an option so Firefox users can see rounded corners and the rest of the world degrades gracefully. With a little more work (and some .gif/.png files) you can still reach a larger audience with still relatively clean markup.
Virtuelvis has a solution using the :before and :after pseudoelements as well as content: url(). This should work nearly perfectly on recent versions of Firefox, Opera, and Safari, and IE will degrade gracefully.
IE support can be derived by using Dean Allen’s IE7 script, as shown in this working example , however…
JavaScript-Centric Solutions
If you are going to load a JavaScript file anyways, you’re probably better off going with something along the lines of Nifty Cubes which consists of a 12KB JS file and a 4KB CSS file. The site is extremely well documented with multiple working examples. Best of all no image files are required, which makes future design changes painless! If there is a high contrast between the element being rounded and the background you will notice the
A derivative of Nifty is Transcorners, which weighs in at 4KB, and may also fit your needs.
Curvy Corners can render some pretty amazing rounded borders. The JavaScript file however is a hefty 48KB, with a ‘lite’ version being 28KB. It also has some minor rendering bugs as of now that were given up on – it is now being rewritten for a 2.0 release.
In Conclusion
The three JavaScript methods provide the most flexible solutions, and you can choose your flavour of speed/quality. The main draw back is that these are post-processing and users may see the changes in real time.
If you wish to do use image files, Nifty Cubes or Transcorners can save some time in the prototyping stages.
