How do I change an inputs border colour without changing the style?

Question

I'm trying to do something pretty simply; change the border colour of an input. In both IE11 and latest stable Chrome, changing the color also changes how it looks (appears 3D/thicker):

If I try "1px solid red" then the border looks the same, but the size changes!

1. Why does changing the colour seem to do more than just change the colour
2. How can I just change the colour without changing anything else (style, thickness, spacing, size, etc.)

I've tried messing with border-width and other properties, but none of them result in the exact same size/spacing as the default with only the colour changed :(

(Please try your changes in JSFiddle before posting... so many people are posting bad answers and then deleting them! http://jsfiddle.net/S2TxT/4/)

<input type="text" value="Default" />
<input type="text" style="border: 1px solid red" />

Answer 1

In IE11 and Chrome, this got me matching boxes.

As for why... browsers will be browsers?

<input type="text" value="Default" />
<input type="text" value="Default" style="padding: 2px 1px; border: 1px solid red" />

http://jsfiddle.net/S2TxT/11/

EDIT

After further investigation, it becomes apparent why this might happen: http://jsfiddle.net/S2TxT/18/

Answer 2

This is the simplest way I can find of fixing the problem. Unfortunately, it involves changing the height CSS. Crazy, I know, just for a border color change!

<input type="text" value="Default" />
<input type="text" style="border: 1px #cecece solid; padding: 2px; height: 16px;" />

http://jsfiddle.net/S2TxT/10/