I have been looking for an elegant solution for this for a while, one that doesnt have limitations like forcing you to have fixed width divs because thats the size of the background image. Of course in the old days we did this with an extra table row but that was just painful. I am going to show you how I did the corners on the pods for blogCFC down the right side of this site.
First we start off with some HTML in a square box.
now this gives us an area for title and body with a container in this case with a style called rightMenu. Now for the CSS for the container, (I have left out the css for the header and body here as they arent important) note the position relative. This makes the div relative to its parent container:
Now we have a div floating in place where we put the code in the HTML. to round the corners we add a few more divs, one for each corner:
And some CSS. First we have to make sure each of our corner divs are very small, setting line and font size to make sure IE gets it right, and making sure the background doesnt tile or overwrite the transparency in the gif or png. Also we make the position absolute, this allows us to exactly position the corners according to their container.
Now each corner gets individual treatment. Remember that these are absolute positioning which means we get to make use of the left, right, top, bottom selectors. By pushing them 1 pixel backwards the one pixel line in the image now sits over the one pixel border of the div.
