CSS Rounded corners

Try the CSS 3 selectors:

.element {
    border-radius:5px
}

For Safari, Google Chrome (Webkit) and Mozilla, use the following two selectors (although Mozilla supports the CSS 3 selector, not sure if the other one does):

.element {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

The only way to have support for all browsers is to use image backgrounds on the anchor tags, usually combined with an image on it's container tag as well.

For instance with HTML like this:

<ul>
 <li><a href="">something</a></li>
<ul>

I would place one image on the anchor tag, and one on the li, so that the element can be variable width and still have rounded corners.

There are CSS3 features and JS solutions that may also work, but are not completely cross browser compatible.

Try:

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

This will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. It may be easier to make a separate class for this - there are 3 statements which are needed for full compatibility.

Also, try here (cssjuice.com) for some more techniques using images.

I'm not completely sure whether this will work with a table, but if you're in complete control - don't use a <table> for layout. Please.

(Note - I think its fine to use the table tag for tabular data, just not where DIVs should be used.)

Update: to apply to one corner only:

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

Continue for topright or top-right.