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: http://jsfiddle.net/afXWu/
I've just tested your jsfiddle demo with my IE9+ and had no issues whatsoever related to the incorrect display of border-radius property.
You aren't closing your
<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"/>.
This recipe can be found in it's original form on Stack Over Flow.