Table Corner Rounding

[Breaks]

Hello there, right well i wasnt sure if you do this in CSS, normal HTML or PHP, well, i have no idea which of these you do it in so i didnt put it in any particular section.

Anyhoo the question is this.. how exactly do you round off the edges / corners in tables so that instead of them being right angles there like nice and rounded? I know CSS slightly and a tad of PHP but im not that advanced with the whole web design / coding thing.

Any help would be great.

Thanks in advance for reading and for any replies i may get.

Breaks.

:: Edit ::

I mean i know i can do it with images... but is it possible to actually do it via code? and have the actual border of the whole table itself rounded off also?

[RFH Reseller: Sol]

I have seen this done using nested tables, although I personally wouldn't go that route. The route I would go is to use CSS and images. Something like:

CSS Code

/* set background images for corners */
#Panel .roundbox { background: url(Images/LeftPanel/Background.jpg) repeat; }
#Panel .top { background: url(Images/LeftPanel/Top.jpg) repeat-x; }
#Panel .top div { background: url(Images/LeftPanel/Top_Left.jpg) no-repeat top left; }
#Panel .top div div { background: url(Images/LeftPanel/Right.jpg) repeat-y top right; }
#Panel .bottom { background: url(Images/LeftPanel/Bottom.jpg) repeat-x; }
#Panel .bottom div { background: url(Images/LeftPanel/Bottom_Left.jpg) no-repeat top left; }
#Panel .bottom div div { background: url(Images/LeftPanel/Bottom_Right.jpg) no-repeat top right; }
#Panel .contentwrap { background: url(Images/LeftPanel/Left.jpg) repeat-y; }
#Panel .content { background: url(Images/LeftPanel/Right.jpg) repeat-y right; }
/* height and width details */
#Panel .top div, #Panel .top
{
 width: 100%;
 height: 10px;
 font-size: 1px;
}
#Panel .bottom div, #Panel .bottom 
{
 width: 100%;
 height: 26px;
 font-size: 1px;
}
#Panel .content { padding: 1px 7px; margin: 0; }
#Panel .roundbox { width: 100%; }

HTML Code:

<div id="Panel">
    <div class="roundbox">
        <div class="top"><div><div></div></div></div>
        <div class="contentwrap">
            <div class="content">
                <p>Content would be placed here</p>
            </div>
        </div>
        <div class="bottom"><div><div></div></div></div>
    </div>
</div>

[Breaks]

Thanks for the reply sol. Yeah i didnt really wanna do it with images, i did some research and i did actually find a nice handy site that shows you how to do rounded corners pretty much similar to the way you described .

Thanks again sol .

[Staff: Warren Ashcroft]

Thanks for the reply sol. Yeah i didnt really wanna do it with images, i did some research and i did actually find a nice handy site that shows you how to do rounded corners pretty much similar to the way you described .

Post it?

[RFH Reseller: Sol]

You should realize that most of the images can be made under 1Kb, and hence a rounded box would add close to 9Kb to the total download. If done properly the end users browser will cache these and hence subsequent downloads will not be require.

I personally think the 9Kb is negligible enough to be allowed (couple of seconds on a standard 56Kbps modem).

[Staff: Warren Ashcroft]

You should realize that most of the images can be made under 1Kb, and hence a rounded box would add close to 9Kb to the total download. If done properly the end users browser will cache these and hence subsequent downloads will not be require.

I personally think the 9Kb is negligible enough to be allowed (couple of seconds on a standard 56Kbps modem).

You could probably created a background with rounded corners for less than 9kb

[Breaks]

Hmmm yeah thats a really good point. I might actually go ahead with the image idea if it proves to be less in bandwidth usage (not that 9kb is alot but still, its nicer when a site loads quick time). Thanks for the information and advice .

[Staff: Warren Ashcroft]

Of course the problem with creating an image background with corners is that you can only have one table size, whereas the other method can let you create any table size - it depends on how many tables your going to create.

[RFH Reseller: Mark Voss]

CSS Design: Creating Custom Corners & Borders