画像を使わず、CSSのみで装飾を済ませるのが多い今のコーディング事情で、ボックスに2重線を引く方法といえば、borderとoutlineをあてたり、box-shadowを当てたり、疑似要素を使ったり、色々な方法があります。
思いついた2重線の書き方のまとめ。

outlineを使って2重線

ボックスの外側にborder。内側にoutlineってイメージです。

.w-border01{
  border: solid 1px #fff;
  outline: solid 1px #c414ba;
  background-color: #c414ba;
  padding: 5px 20px;
}

box-shadowを使って2重線

影をぼかしなしで2重であてる。境界線を複数あてれなかったCS時期のPhotoshopのレイヤースタイルを思い出します。

.w-border02{
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c414ba;
  background-color: #c414ba;
  padding: 5px 20px;
}

疑似要素を使って2重線

beforeに関しては可変さえるためにはcalcでずらした分のwidthを引いてあげないと、線がズレます。

.w-border03{
  position: relative;
  z-index: 0;
  border: 1px solid #fff;
  background-color: #c414ba;
  padding: 5px 20px;
}
.w-border03:before{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 2px);
  min-height: 100%;
  border: 1px solid #c414ba;
  padding-bottom: 2px;
  z-index: 1;
}

入れ子を使って2重線

入れ子の構造にしても良い場合はこれでもアリかも。ただし大元には「display: inline-block;」にしておかないと、上下の線は消えます。
リストのテキストアイコンを並べる時とかに有効です。

.w-border04{
  box-sizing: border-box;
  display: inline-block;
  background-color: #c414ba;
}
.w-border04 em{
  margin: 1px;
  border: 1px solid #fff;
  display: block;
  text-align: center;
  padding: 5px 20px;
  font-style: normal;
}

DEMO

【参考サイト】

• 1つの要素にCSSだけで二重ボーダーをつける3つの方法