How to get rounded corners on web pages
The traditional way to get pretty-looking corners for all your tables (and divs, and menus, and whatnot) used to involve setting a background image to the table or other element. While simple, this is a very inflexible solution. It is completely dependent on the conditions of the box at the time the background is created. What happens if some text in the box gets updated, or the user changes their text size or screen resolution, or any number of potential problems?
Clearly fixed static images are not the way to go. CSS fixes that. Actually, the upcoming CSS3 (still a work in progress as of September 2006) should allow you to give your boxes round corners with a single rule:border-radius: <length> <length>
The first length is the horizontal radius, the second is the vertical radius.
Unless this article is several years old, CSS3 is not out yet, and so we have to choose other alternatives. All of them involve an older version of CSS in some way.
Solutions for rounded corners fall into 3 categories:
- Those that use images for the corners
- Those that use no images but do use Javascript
- Those that use no images or Javascript
The first option is probably the easiest way to go for most cases, and it allows you to do more than just rounded corners. For example, you could put other decorations in the corners. While it sounds like the same solution as the old background image one, this option is different. It only uses images for the corners, using a solid color for the rest of the box, meaning the box itself can be resized without having to redo the images. These solutions usually work well on all browsers. The main drawback is that it still is dependent on images, so if you want to change the box color, you need to re-create the corner images.
The second option eliminates the need for images, but requires that users have their Javascript enabled. The power of Javascript means that a lot of advanced effects can be done without needing to upload images to your server with every change. Some browser quirks in their Javascript mean that not all solutions will work well for all browsers.
The last option uses some unusual browser tricks, and is not necessarily equal on all browsers. Nevertheless, it is extremely simple to set up. In the past, solutions using this option tended to look blocky and rough around the edges, but there are some very advanced solutions now that make use of anti-aliasing. Beware of browser incompatibilities, however.
A very good listing of rounded corners solutions can be found here:
http://www.smileycat.com/miaow/archives/000044.html