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 le

Solution 1:

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)

IE11

EDIT

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 2:

Try disabling the outline property:

outline:none;