CSS Rounded corners

Question

I've seen a lot of codes for this but it appears non of them work very well or at all. I've used pictures for rounded corners but I need the code so that it will round the border of a <table>. The only solutions I've found for this problem are to have images In the cells around the border. Anything else I can try?

Answer 1

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.

Answer 2

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;
}

Answer 3

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.

Answer 4

You can round them through CSS but only for supported browsers.

Your other non-image options are script-based like jQuery Corners or a similar script.

Both of these methods have caveats (IE support, visitors with JavaScript disabled, etc.). If you're set on using them, I would focus on getting them to work with CSS in the browsers that support it and just make sure that it looks acceptable without them in IE.