Rounded Corners, an Obsession
Posted by Jonathan Ng | Filed under Technical
Unless you’re using IE, you could see that all corners in my site are - rounded. I just don’t know but it’s sort of an obsession to me. There are beyond doubt dozens of articles at alistapart about rounded corners, as web designers have been fascinated by it for ages. Numerous methods were devised to achieve the effect of rounded corners, even those that require JavaScript.
In a nutshell, there’s no perfect method for it. Using only XHTML and CSS would require a whole lot of nested “containers” to ensure compatibility in IE. A clean XHTML+CSS uses only one container, :before and :after CSS pseudo-elements to round the corners. This, of course, is the desired method, especially if it’s a Firefox fan site. This method is employed extensively at every “corner” in this site. That’s why it looks so “cacat” (Malay term referring to the disabled) in IE.
So while we wait for the next IE version to support :before and :after, some came up with JavaScript to deal with it. A recent one I came across was by Alessandro Fulciniti. It uses JavaScript to add the required number of “containers” to elements that you want to round. One advantage that I can think of is it’s simplicity to the author. This idea can be modified so that the author just needs to specify the image he wants for the top-left corner, for example, and the script goes to work. Or, more technically, the author can specify the exact CSS background values. For example:
addContainer("elementID", "url(Images/top_left.png) top left #CCC no-repeat");
addContainer("elementID", "url(Images/left.png) left #CCC repeat-y");
As you can see, the author has a bird-eyed view of the background images that he’s pilling up underneath the element. I think that it’ll be particularly useful when you have more than just a few rounded corners in your page.
Another cross browser compatible method that I could think of, is to use JavaScript to parse through the CSS, looking for :before and :after pseudo-elements and manually adding them to the page. This method however, is pretty theoretical.
For now, I would say that Alessandro method would be the most desirable as it would allow me to add the left and right shadows to my boxes, hence allowing a fluid layout.
