Rounded corners

I spent some time exploring different ways of creating a box with rounded corners. After checking out how other people have attacked the problem I came up with a slightly different approach. I only use four extra divs, one for each corner. As far as I can tell this doesn’t break in any of the browsers I checked in.

To get a smoother look to the corners and still be able to change the background colour of the box by just editing the stylesheet I used transparent PNG images. Of course that doesn’t work too well in IE/Win, so I use a little bit of CSS hacking to send GIFs to those browsers.

Posted on July 22, 2003 in CSS