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