Border Position

Question

I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.

I want a 2px border that's positioned in the center. So it shows 1px outside and 1px inside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadow of some kind but I'm horrendous at shadows in CSS.

There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.

Thanks.

Answer 1

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:

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

https://developer.mozilla.org/en/docs/Web/CSS/outline-offset

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

https://davidwalsh.name/outline-offset