Photoshop Question posted in
The official user guide can be found here.

Border Position – Photoshop

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.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Perhaps with a suitable sized absolutely positioned pseudo-element?

    div {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em auto;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  top:-6px;
  left: -6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border:12px solid rgba(255,0,0,0.5)
}
    <div></div>
    Login or Signup to reply.
  3. 0

    You could nudge the container so that it would look like it’s an inner border. For example, if you have have a 2px left border and want it to appear as an inner border, you can just offset the whole container to the right, like this:

    position: relative;
left: 2px;

    You might have to do other corrections, such as reducing the width of the container by 2px.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search