I recently decided to recode a Web site I had developed several years ago to make it cleaner and easier to modify. The design involved lots of rounded corners and I had used images for some of the corners and CSS hacks for others. These methods did the job but made the markup somewhat bloated and ugly, and the many images also increased the page download time.

CSS to the rescue! I decided to make use of the CSS3 border-radius property which allows for rounded corners without any images or extra HTML. CSS3 hasn’t been properly implemented yet, however the border-radius effect can be achieved in Gecko, Webkit and KHTML-based browsers using -moz-border-radius, -webkit-border-radius and -khtml-border-radius respectively. Opera’s Presto rendering engine had a similar property but this has unfortunately been removed. Opera’s market share (around 2%) is small enough that I can feel okay ignoring it until the developers choose to bring back the border-radius property. Internet Explorer, however, has a majority market share and predictably has no support for border-radius nor an equivalent proprietary property.

One of many solutions I found to Internet Explorer’s disability was a JavaScript solution, DD_roundies, by Drew Diller. Using conditional comments I included the reasonably small 9kb js file in my HTML source only for Internet Explorer users and added a rule for each ID or class that I wanted to have rounded corners for. Now when I load up my page in either IE 6, 7 or 8, the borders of the appropriate divs are as rounded as they are in Firefox.