It wasn't too long ago when the only real way to get nice, rounded corners onto a webpage was through the use of images. This is ridiculous if you think about it because it should be very easy for a browser to render rounded corners itself. Today, all good browsers come with a built-in ability to control the look and feel of corners.

Before we begin its worth noting that good web design avoids making use of tables (unless you are actually presenting a table) and instead uses the far more powerful and dynamic <div> tags. If you want to follow along here, make sure your HTML is DIV based first.

Let's start by looking at a standard CSS class that specifies a thin border, some padding and a shaded background:

This class, wrapped around some text look like this:

But, let's say that we wanted to give it a bit of flair. If the user hovers over the "button", the background changes color and the border becomes rounded at the top right corner. To accomplish this, we use the following CSS:

Now, if you hover over the button, you should notice the change in background color accompanied by the rounded corner, like so:

Of course, its just as easy to make all the corners of a div rounded in one go by dropping the location specifications (i.e. topright) from the declarations. In which case, a purely rounded div would have a class declaration like this:

and would look like this as a result:

That's how easy it is. Remember that in order to make use of this, your website needs to be based on good underlying HTML development. Many older or poor quality websites use tables for layout instead of <div> tags. If this is the case, consider upgrading or moving to a quality platform such as Drupal or a Site prebuilder distribution.