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.
Subscribe / follow
- Senior Iteration Manager at Mutual Mobile (Austin, TX, Te, US)
- Graphic Designer at University of Notre Dame (University of Notre Dame, In, US)
- Sports-Loving Product Designer at Hudl (Nebraska, California, Texas, New York, Te, US)
- Front-end Drupal Developer at Cheeky Monkey Media (Kelowna, British Columbia, CA)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost