IE Border radius display error


I have a weird issue with border radius and IE 9+.

The browsers are displaying the rounded corners in the left side like in the images attached. If you encountered such problems let me know your solution.

I am also attaching an example of CSS I am using for success message:

width: 100%;
padding: 15px;
background-color: #beff97;
color: #68bd45;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

EDIT: I have <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

here is the fiddle for what i am doing there:

Print screen of IE9.

Problem courtesy of: Herr Nentu'


I've just tested your jsfiddle demo with my IE9+ and had no issues whatsoever related to the incorrect display of border-radius property.

IE9 (emulation)

enter image description here


enter image description here


You aren't closing your meta tag

<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/> <- that last slash should be present.

Or you can try this <meta http-equiv="X-UA-Compatible" content="IE=edge"/>.

Solution courtesy of: W.D.


Try disabling the outline property:

Discussion courtesy of: Karim AG

This recipe can be found in it's original form on Stack Over Flow.