Corners on divs/tables
 

Can anyone offer advice on the best way to create curved corners on tables, divs etc. Assume i would need to create them as gifs in a paint package and then get the colours exactly spot on what i will be using for the rest of the table and background in the css. Anybody know of easy packages that make this easy on any general advice on doing it? Thanks.

I would say that there isn't any general way of doing it. Don't get me wrong but it's a matter of choice really. Nested div's vs semantic markup all depends on how it's designed. Small images vs one large image, 4 server request vs 1, alpha transparancy vs no transparancy (dealing with alpha transparancy you don't want images to overlap eachother), expandable vs "static" box etc.

Then you always have the javascript way if you don't want to clutter your markup to much in development(easier to edit aswell).

Then there is a CSS3 property called border-radius: the thing is it isn't supported in all the browser but if you don't mind that you can use it for mozilla/webkit users.

With a table just do it grid like.

Are you able to whip-up a design or a box with rounded corners? then i could give you my opinion on how i would have done it.

cheers

I wrote a blog post on this a while back.

http://corymathews.com/?p=348

It uses jQuery for the corners.

Thanks for getting back to me. I'll take a look at JQuery. Cheers.

Several ways.

If the div is going to always be a fixed width and height the best way is to use a background image for it. It could be included in a CSS Sprite image and would be quicker and more semantic.

If the div is going to be dynamically sized based on content then you could use multiple images for each corner and position them using CSS inside the box.
Or you could use javascript to do it for you which would keep the code clean for non-javascript users but it isn't as quick as non-js methods.