Rounded corners not working in IE9

Question

As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displ

Answer 1

Making the border radius compatible to IE browsers, follow these steps:

1. Open Setting option in IE.
2. Go to compatibility and view setting.
3. Uncheck "Display intranet sites in Compatibility view " as well as uncheck "Use microsoft compatibility list".

Answer 2

see this question regarding the meta tag and some other possible issues/process to eliminate: IE9 border-radius

Answer 3

It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.

Answer 4

For IE9, you are correct it doesn't like the border radius and the filter combined. Here is what I followed and it worked perfectly in IE9, as well as all the other browsers.

https://github.com/bfintal/jQuery.IE9Gradius.js

Hope that helps!

Answer 5

You only need to define one number for your border radius if you're using "bottom-left" and so on. By specifying two numbers IE9 may not interpret it correctly.

If you use the following, the first number is the top-left, second is top-right, third is bottom-right, and fourth is bottom-left.

    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    -0-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;