I want to round the corners of the header image on the site CafeChoc. I have tried a few things but they seem to be related to rounding the corners of the header image container.

As I have left a blank logo area at the top of the site I want to match the rounded corners as well so that it does not look odd.

Any clues please. And to JD I tried the webkits and moz radius fix you have suggested in other posts . That only does the rounded corners at the top not the image the way I have it.

your problem is that the images don't fill the header area. as an experiment, change the width of the page to 800 fro 850 and if you specify the border code, you will see the image with the rounded corners.

think of it this way, the image container defines what you will see as long as the image is as big or bigger than the image container. If you want to use images that are narrower that the image container, use a photo editor and round the image corners.

Thanks JD. I thought that may be the case. I wanted to have the container wider than the image becuase the background is so dark. But that's OK I guess I'll just stick with the square corners for now. Editing all the images would be waaaaay too time consuming lol.

Solved this one by adding a border to the image and rounding it off by using the following CSS insert

div#imagecontainer { 
border: solid 5px #FBDB84; 
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
}