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

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 3

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 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.

Answer 5

If you don't have to work with all browsers, consider using border-radius. See http://www.css3.info/preview/rounded-border/ for more information. Newer Mozilla and Webkit-based browsers support either this tag or moz-border-radius and -webkit-border-radius.

Answer 6

Here is a way that isn't browser dependent (that I know of, it works on the popular browsers.) It doesn't use a table, so you'll have to put the table in the most deeply nested div and it is lengthy and heavy, but it works. The images referred to in the code below are the rounded corners you draw yourself. The radius of the corner is 44px.

This is a variation on: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl">
    <div class="tr">
        <div class="bl">
            <div class="br">
                <div class="t">
                    <div class="b">
                        <div class="l">
                            <div class="r">
                                <div>Do or do not, there is no try</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.tl
{
    font-family: Verdana, Arial;
    font-size: 16px;
    position: relative;
    left: 30px; 
}

.tl, .tr, .bl, .br
{
    width: 655px;
    height: 250px;
}

.t
{
    width: 567px;
    height: 250px;    
    margin: 0 0 0 44px;
}

.b
{
    width: 567px;
    height: 250px;    
}

.l
{
    width: 655px;
    height: 162px;    
    margin: 44px 0 0 -44px; 
}

.r
{
    width: 655px;
    height: 162px; 
}

.bl
{
    background: url(/images/front/rcbla.png) 0 100% no-repeat;
}

.br
{
    background: url(/images/front/rcbra.png) 100% 100% no-repeat;
}

.tl
{
    background: url(/images/front/rctla.png) 0 0 no-repeat;
}

.tr
{
    background: url(/images/front/rctra.png) 100% 0 no-repeat;
} 

.t
{
    background: url(/images/front/adot.png) 0 0 repeat-x;
}

.b
{
    background: url(/images/front/adot.png) 0 100% repeat-x;
}

.l
{
    background: url(/images/front/adot.png) 0 0 repeat-y;
}

.r
{
    background: url(/images/front/adot.png) 100% 0 repeat-y;
}

Answer 7

I'm assuming that rounded corner CSS above wouldn't work in IE6. Something you may want to keep in mind.

Three stacked divs with background images is the easiest approach.

<div class="top">&nbsp;</div>
<div class="mid"> <!-- content --> </div>
<div class="bottom">&nbsp;</div>

The background for your div with id mid would be vertically tiled through CSS. Works in IE6.

Answer 8

I tend to go with the border-radius option person-b covered earlier.

If I absolutely have to support IE (i.e. it's a fundamental part of the design and not just a little enhancement), I've had some success with dd_Roundies, which makes use of VML to get the job done.

Answer 9

You're all awesome! I'm picking up enough perspectives on this issue to help me fully understand what I'm doing. This site rules. Thanks for all the help!

Answer 10

Check out www.easyimg.com, simple solution that does not require css hacks or hours in photoshop.