Curved corners in the IE's... CSS 3? Conditionals? Images? JS?

Question

Curved corners in the IE's... I'm using a CSS 3 border-radus class called .curved on all my things I want with cool curved corners. The new CSS works in all the normal browsers, however IE is being a right dips**t.

Whats the best practice for adding rounded corners nowadays. Shell I target anything with .curved in JS and do it all in jquery? Use some messy conditional tags. Or just give it a few years and not use CSS 3?

Answer 1

Hi Smickie,

There are 3 ways that I know of to create rounded corners that will work across all browsers.

1. Use an image for the top and bottom of a box
2. Use an image for the right corner/left corner for the top and bottom
3. Use a ton of div tags to create a rounded corner look.

I would not rely on CSS 3 properties at the momment because they are not compatible enough across all platforms. What I like to use is the first option because it will always be cross platform, its easy to implement, and it does not add a ton of markup. With the state of the web right now, there are not many other options if you want your corners to work in all browsers.

Hope this helps, Metropolis

Answer 2

I will just link :P

http://www.modernizr.com/

or

http://www.curvycorners.net/