Border Position

There’s a work around, since border represents outer stroke for you, you can make use of outline css property with outline-offset set to negative value to have the inner 1px stroke^{( 1 )} JS Fiddle

body {
  padding-top: 10px;
}
#test {
  width: 250px;
  height: 200px;
  background-color: orange;
  margin: 0 auto;
  border: 1px navy solid;  /* outer stroke */
  outline: 1px navy solid;  /* inner stroke */
  outline-offset: -2px;  /* negative border width + outline width */
}

<div id="test"></div>

Expand snippet

^{( 1 )} As the above fiddle might not demonstrate the explanation good enough, here’s the same example with two colored strokes and 4px for each stroke instead of 1px Demo Fiddle

Resources:

http://caniuse.com/#search=outline

http://www.w3schools.com/cssref/css3_pr_outline-offset.asp