CSS Border radius, border color ghost corner borders in IE

Morning,

I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?

Screen Shot showing ghost borders:

enter image description here

input,
textarea,
select {
  position: relative;
  display: block;
  border: 3px solid #4f4f4f;
  border-radius: 10px;
  margin: 6px auto 22px auto;
  width: 260px;
  font-size: 13px;
  text-align: center;
  &:focus {
    outline: none;
    border: 3px solid #4cc7fa;
  }
}


Many thanks!