Rounded Corners Without Tables
Posted October 21, 2006on:
There are a variety of methods involving CSS and HTML to get rounded corners. Mozilla-based browsers actually have a bit of CSS that makes it really nice and easy, but what about the other browsers like IE, Opera, Safari, Camino, Konquerer, and all the IE mashups (AOL, MSN, etc)?
Well, some people prefer to go with a CSS method that doesn’t use images, but personally, I don’t think it’s that much of a hassle to just make the images. However, sticking them to the corners without using a table can be a bit tricky. There are a few ways to do this as well, but I find the following to be the easiest:
<div style=”width:100%; margin: -20px -20px 0 -20px; padding: 0px; text-align: right;”><img style=”float:left;” src=”top_left.gif”><img src=”top_right.gif”></div>
Let me explain a bit here. I usually put everything into a container (DIV) that has padding for visual purposes. If you want the corners on, well, the corners, you will have to cancel out the padding and force the images onto the corners. Rather than go with absolute positioning, I just used a negative margin. The zero is for the bottom of the div, since the rest of the objects on the page will still behave by the padding defined and we don’t want to push elements down any farther. To get the corners to hit opposite ends of the div without using 2 divs (which I find to be irritating and sloppy) I told the CSS to align to the right, but I floated one image to the left. They all line up smoothly. Do the same for the bottom corners and you’re set!
Oh by the way, make sure you close all of your elements, otherwise the bottom corners might jump up since the margin won’t be rendered due to incorrectly nested tags.