ウェブデザインのコーディングをしていると、ちょっとしたデザインのあしらいなんかをCSSで表現する必要が出てきます。その中でもボーダーを使うケースは結構多いのではないでしょうか。今回はそんなボーダーを使ったデザインで複数の線を使う場合のテクニックをまとめてみたいと思います。   今回のサンプルのベースとして下記のHTMLとCSSの設定を共通で使っていきます。borderプロパティを使う場合には「box-sizing: border-box;」に設定しておくのがポイントです。見た目や設定が変わってきますので、あらかじめ設定しておく方がいいですね。

// HTML
<div class="sample"></div>

// CSS
.sample {
  box-sizing: border-box;
}

  それではパターンごとに見ていきます。中盤から後半のものは応用テクニックになりますので、ぜひ覚えておきたいですね。  

1. 太さと間隔が同じ二重線（borderプロパティのdoubleを使用）

まずは基本の二重線ボーダーからです。CSSのborderプロパティでスタイルを「double」にするだけで二重線になります。ただし、太さと間隔が同じであまりデザイン性という視点ではあまり目を引かない印象ですね。 【CSS】

.sample {
  border: 6px double red;
}

  実際に作成するとこんな感じになりますね。    

2. 太さと間隔の異なる二重線（borderプロパティとoutlineプロパティの併用）

ここからは応用編になります、先ほどの方法では同じ太さ・間隔の二重線でしたが、デザイン的に変化をつけたい場合もあります。そんな場合にはborderプロパティと合わせて「outlineプロパティ」を併用する方法がお勧めです。 【CSS】

.sample {
  border: 6px solid red;
  outline: 2px solid red;
  outline-offset: -10px;
}

  実際に作成するとこんな感じになりますね。   このように外側（もしくは内側）の一方にはborderプロパティで線を作成し、内側（もしくは外側）のもう一方の方にも太さの異なる線を作成します。そして、この線に対して「outline-offsetプロパティ」でオフセットの距離を設定することで、間隔も自由に設定できる、太さの異なる二重線が完成します。ただし、outline-offsetプロパティはIE11には対応していないため、対象ブラウザによっては、下記のように擬似要素を作成し、内側もしくは外側に配置する方法で対応するしかなさそうですね。。 【CSS】

.sample {
border: 6px solid red;
  position: relative;
}
.sample::before {
  content: "";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  position: absolute;
  left: 2px;
  top: 2px;
  border: 2px solid red;
}

  実際に作成するとこんな感じになりますね。    

3. 二つ以上の異なるスタイルのボーダー（box-shadowプロパティを内側に適用）

最後も応用になります。今度は2つ以上で異なる太さや色のボーダーを重ねたい場合に使えるテクニックです。ここでは「box-shadowプロパティ」を使って作成していきます。本来、box-shadowプロパティはドロップシャドウを表現するときに使用しますが、ここではソリッドなシャドウにすることでボーダーのように見せることができます。また、box-shadowプロパティはコンマで区切ることで複数の設定を重ねることができます、その上、insetの指定をすると内側に表示することも可能です。 【CSS】

.sample {
  box-shadow: 
    0 0 0 4px red inset,
    0 0 0 8px yellow inset,
    0 0 0 12px blue inset,
    0 0 0 16px lime inset;
}

  このようにして、複数のボーダーが重なったデザインを作ることができます。ただし、この方法の場合にはベタ塗りの背景色ではない場合には、ボーダー同士の間隔をあけることはできないので注意が必要です。実際に作成するとこんな感じになりますね。  

---

  今回はCSSを使ってボーダーデザインのあしらいを作成するときに、複数のボーダーを使う場合のテクニックをまとめてみました。単純にCSSのプロパティで完結させることもできるので、気軽に試してみることができますね、機会があればぜひ使ってみてはいかがでしょうか。