transition ease-in-out not working on text input focus border

transition: all .2s ease-in-out; is not working on focus for my text input field.

What I want it to do is that when you focus a text input field, a black border fades in, vice-versa when you unfocus it.

This is my css:

#game-pin > input:focus {
  outline: none;
  border: 2px solid black;
  transition: all .2s ease-in-out;
}

I've tried putting transition: all .2s ease-in-out; into #game-pin itself to no avail. I've also tried transition: border .2s ease-in-out; instead, but it still doesn't work.

I can't seem to find any similar issue on the internet, so I thought it would be a problem on my browser. However, I tested this out on Opera, Google Chrome, Internet Explorer, Firefox, Safari and Microsoft Edge, with all of them refusing to ease-in-out that border for me.

Any help would be appreciated, thanks!