Hi everyone.

I am currently redesigning my old table based website with a new CSS design.

One problem I am having is creating rounded corners in CSS. I would be able to do this very quickly using tables, but I feel that it is time for me to move on.

I have tried searching everywhere, but I cannot seem to find anything for what I want to do.

Is there any way of creating a box with images having a gradient with rounded corners. This will be used as the header on my site. What I would have done with tables is create an image for each corner, the sides and one for in the middle. How can I do this with CSS?

I have attached an example of what I am looking for.

Thanks Very much,
Dan.

I've been trying to do the same thing in a Blogger template. Here's an article on how to do it I found a while back.

http://www.html.it/articoli/niftycube/index.html

Thanks for the link, MrBrownThumb.

The only problem is that I want to use images. I have found many tutorials on how to do it without images and have also found some that tell you how to use them round the outside to create the "rounded" corners, but I have not found anything that tells you how to set an image on the inside of the box.

What I want to do is have an image in the middle, where the text would be written on top and of course the corners rounded.

Any ideas?

just do it as a background depending on how big the image is, if the image is too big, then the same way that it can be done with tables, it can be done with css only faster

Dan try Spiffy Box. It's a variation of spiffy corners so if you don't like the previous link try searching for 'spiffy corners' and I'm sure you'll find others.

The main problem you're likely encountering is that each html element can only have one background image. The solutions are generally to place each of the four corners on a different element.

Thanks everyone for your replies.

Spiffy box works well - cheers!