CSSを使って1要素だけで複数のボーダーをつけるテクニック

CSSの border では1本の線しか引くことはできません。要素を入れ子にすれば複数の線を引くことはできますが、その分要素を増やすのもあまりいいものではありません。そこで、別の方法を紹介します。

box-shadowの使用


<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: #b4c248;
  box-shadow: 0 0 0 8px #6b5636, 0 0 0 20px #db8d17;
}

box-shadow を使うことで擬似的に複数の線を引くことができます。3つ目の値は ぼかし距離 を指しますが、これを 0 にすることで実現しています。

また、4つ目の値は 広がり距離 でこの値を大きくしていくことで外側に線を増やすことができます。

余白を設定


.box {
  box-sizing: border-box;
  padding: 20px;
  width: 100px;
  height: 100px;
  background-color: #b4c248;
  box-shadow: 0 0 0 8px #6b5636 inset, 0 0 0 20px #db8d17 inset;
}

box-shadow はボックスの外側に元のボックスには影響しない影を作ります。なので、今のままだと 100px 以上の幅になっていると思います。そこで、 box-shadowinset内向きの影 にすることでボックス内に収まるようにし、 padding で線幅の分だけ余白を設定しています。