ie9 border radius css

Question

I'm trying to get rounded corners to on of my css class with the code as it follows

border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

I have been reading couple of articles related to my issue and the code above should be ok but in my case won't fire.

duplicate post http://stackoverflow.com/questions/5381446/ie9-border-radius — Anirudha Gupta, Jul 02 '12 at 04:41

score 3 · Accepted Answer · answered Jul 01 '12 at 12:47

Add this to your markup as the very first line.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Use this for border radius for better compatibility with other browsers also.

     -moz-border-right-radius: 5px;
     -webkit-border-right-radius: 5px;
     border-right-radius: 5px;
     -moz-border-left-radius: 5px;
     -webkit-border-left-radius: 5px;
     border-left-radius: 5px;

score 1 · Answer 2 · answered Jul 01 '12 at 12:50

IE9 uses CSS3 (the industry standard). Your code should therefore work.

A very common problem is that although you are using ie9, it might be rendering the page using an older version. See if compatibility mode is enabled by mistake. You could also try the developer tools (F12) and look at the document mode and browser mode (at the top) are set to IE9.

ie9 border radius css

2 Answers2