css3 - Offset border effect in pure css -

i trying create offset border effect. can done pure css.

these buttons different sizes , colours.

update

as web-tiki pointed out in comments on answer, can achieve entire affect entirely box-shadow. take @ jsfiddle demo here: https://jsfiddle.net/5a0bvyup.

i'm going leave answer in state submitted in because give idea of how implementation works (and if closely you'll see how box-shadow differs 1 described below).

---

note: in answer i've made foreground box red instead of white demonstrate 'offset border' not overlap initial element. you'll need change white yourself.

the left , bottom borders

you can achieve left , bottom borders box-shadow. need create solid shadow matches background colour, , behind add second shadow matches foreground colour, offset 1 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 , right borders

you can use pseudo-elements (::before , ::after) fill in 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>