Helpful Information

Category: General web building

Round Table Corners

Hi,

is there any style attribute to make the corners in tables round? Also is it possible to define the 'level of roundness'?

DHTMLHELP

<style type="text/css">
-moz-border-radius: 30px;
</style>

I'm 99.9% sure of that being the right way to do it ;) Only works in Mozilla though, unless NS6 or 7 can do it now, too.

Hi Sypher,

so can I use:

<table style="-moz-border-radius: 30px;">
<tr>
<td>

</td>
</tr>
</table>

or

<table -moz-border-radius="30px">
<tr>
<td>

</td>
</tr>
</table>

Also does it work in IE?

DHTMLHELP

To make it Cross Browsers you will probably have to use an image in each corner to do that.

To handle a RoundTable corner, call King Arthur and ask him to send over a knight and sword. He'll cut off anything that gets in the way! <grin>

The CSS3 specs provide for a property known as "border-radius".

When Mozilla has partial support for a property, but not entirely valid, it appends a -moz- in front of it.

The CSS3 border-radius value's call for two measurements, one is for the width of the curve, the other for the height.

The Mozilla -moz-border-radius value only accepts one measurement, which defines both the width and the height.

There's the entire explanation behind it. ;)
(Another CSS3 property is opacity:, and I am letting you figure out why Mozilla has -moz-opacity ;)).

Anyway, it must be used in a style definition, not directly as an HTML attribute dhtmlhelp. :)

Oh, and that should work in all versions of NS6 (most at least, if not all), NS7, K-meleon, Galeon, Beonex, Mozilla, etc.

It is used for some chrome widgets in the XUL of the window (in some themes).

Hi,

does anyone know how I can achieve this in IE:

<table style="-moz-border-radius: 30px;">
<tr>
<td>

</td>
</tr>
</table> ?????

or

<table -moz-border-radius="30px">
<tr>
<td>

</td>
</tr>
</table> ??????

DHTMLHELP

If you read the replies, you'd know you can't do it using that for IE

What should I use then?

DHTMLHELP

Images, precisely four - one for each corner. ;)

And some extra table layout work to boot. :(

Hi everyone,

thank you for your help. It doesn't look like there is a small kb solution to my problem. Hopefully they will decide to remove the -moz- one day and make it IE compatible.

DHTMLHELP

For the ie solution if you choose to use images you don't need 4 different ones, you can also use:

document.getElementById("image_id").style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation="1")

1 = 90 degrees.

I think this works in ie4+. I know it works in ie6

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/properties/rotation.asp

Hi xgoose,

that is very clever, I'll have a go at it.

thanks,

DHTMLHELP