Offset border effect in pure css

Question

I am trying to create an offset border effect. Can this be done with pure css.

These are buttons so will be different sizes and colours.

Answer 1

Update

As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow. Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.

I'm going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you'll see how their box-shadow differs from the one described below).

---

Note: In my answer I've made the foreground box red instead of white to demonstrate that this 'offset border' does not overlap the initial element. You'll need to change this back to white yourself.

The Left and Bottom Borders

You can achieve the left and bottom borders really easily with box-shadow. You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:

body {
  background: black;
  padding: 30px;
}

div {
  background: red;
  height: 72px;
  width: 192px;
  
  box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}

<div></div>

The Top and Right Borders

You can then use pseudo-elements (::before and ::after) to fill in those extra borders:

body {
  background: black;
  padding: 30px;
}

div {
  background: red;
  height: 72px;
  width: 192px;
  
  box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
  position: relative;
}

div::before {
  background: white;
  content: '';
  position: absolute;
  height: 1px;
  width: 7px;
  top: 6px;
  right: 100%;
}

div::after {
  background: white;
  content: '';
  position: absolute;
  height: 7px;
  width: 1px;
  top: 100%;
  right: 6px;
}

<div></div>

Answer 2

I use pseudo-element :after to create offset border effect.

body {
  background: black;
  padding: 30px;
}
div {
  background: white;
  height: 75px;
  width: 175px;
  position: relative;
}
div:after {
  content: '';
  background: transparent;
  border: 1px solid white;
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: -7px;
  position: absolute;
  z-index: -1;
}

<div></div>