borderの二重線を作る

外枠を二重線にする

上下二つにレイアウトを分けて、二重線で枠を囲みたい場合です。

border: doubleを使う

Ex)境界線を確実に区分けする

<div class="content">
    <div class="border-top-space">
        <div class="top-content">上部コンテンツ</div>
    </div>
    <div class="border-bottom-space">
        <div class="bottom-content">下部コンテンツ</div>
    </div>
</div>

/* コンテンツ全体のボックス */
.content {
    margin: 0 auto;/* 中央に寄せたい場合 */
    width: 300px;  /* ボックス全体幅 */
}

/* 上部コンテンツの大枠 */
.border-top-space {
    border: 5px double;/* 上部コンテンツの二重線 */
}

/* 上部コンテンツ */
.top-content {
    background-color: #ccc;
    height: 390px;
}

/* 下部コンテンツの大枠 */
.border-bottom-space {
    border: 5px double;/* 下部コンテンツの二重線 */
    margin-top: -5px;  /* 被っているボーダー分、marginをずらす */
}

/* 下部コンテンツ */
.bottom-content {
    background-color: #f00;
    height: 95px;
}

/* コンテンツ全体のボックス */
.content {
    margin: 0 auto;// 中央に寄せたい場合
    width: 300px;  // ボックス全体幅

    /* 上部コンテンツの大枠 */
    .border-top-space {
        border: 5px double;// 上部コンテンツの二重線

        /* 上部コンテンツ */
        .top-content {
            background-color: #ccc;
            height: 390px;
        }
    }

    /* 下部コンテンツの大枠 */
    .border-bottom-space {
        border: 5px double;// 下部コンテンツの二重線
        margin-top: -5px;  // 被っているボーダー分、marginをずらす

        /* 下部コンテンツ */
        .bottom-content {
            background-color: #f00;
            height: 95px;
        }
    }
}

※注意※
二重線は2px以下ですと二重になりません。
上部と下部の境界線が上手い事作れます。

※ポイント※

1. コンテンツ全体（.content）の中に、上部コンテンツ(.top-content)と下部コンテンツ(.bottom-content)を作る。
2. 上部コンテンツと下部コンテンツを、更に上部ボーダー(.border-top-space)と下部ボーダー(.border-bottom-space)で囲む。
3. 上部ボーダーと下部ボーダーをCSSで二重線をつける。
4. 上部ボーダーのbottomと下部ボーダーのtopで境界線が被ってしまうため、下部ボーダーのmargin-topで調整する。
   ※上部ボーダーのmargin-bottomで調整しても大丈夫です。

box-shadowで分ける

Ex.1)広がりを利用するケース

<div class="content">
    <div class="top-content">上部コンテンツ</div>
    <div class="bottom-content">下部コンテンツ</div>
</div>

.content {
    margin: 0 auto;
    width: 300px;
    border: 6px double;
}

.top-content {
    background-color: #ccc;
    height: 400px;
}

.bottom-content {
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 6px #000;/* 広がりを調整する */
    background-color: #f00;
    height: 100px;
}

.content {
    margin: 0 auto;
    width: 300px;
    border: 6px double;

    .top-content {
        background-color: #ccc;
        height: 400px;
    }

    .bottom-content {
        box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 6px #000;// 広がりを調整する
        background-color: #f00;
        height: 100px;
    }
}

※ポイント※

1. コンテンツ全体の中に、上部コンテンツと下部コンテンツのボックスを作る。
2. コンテンツ全体を二重線で囲む
3. 下部コンテンツにbox-shadowを3つ作って、二重線のように作る。

box-shadowを3つ利用して、「擬似」二重線を作ってます。
下部コンテンツの周りを囲む二重線がbox-shadowになります。
必然的に3の倍数のborderになってしまうので、そこがネックになるかも。
3の倍数以外のborderですと、線の太さに相違が発生してしまいます。

Ex.2)影を上に移動させるケース

.content {
    margin: 0 auto;
    width: 300px;
    border: 6px double;
}

.top-content {
    background-color: #ccc;
    height: 300px;
}

.bottom-content {
    box-shadow: 0 -2px 0 0 #000, 0 -4px 0 0 #fff, 0 -6px 0 0 #000;/* 上に移動させる */
    background-color: #f00;
    height: 100px;
}

.content {
    margin: 0 auto;
    width: 300px;
    border: 6px double;

    .top-content {
        background-color: #ccc;
        height: 300px;
    }
    .bottom-content {
        box-shadow: 0 -2px 0 0 #000, 0 -4px 0 0 #fff, 0 -6px 0 0 #000;// 上に移動させる
        background-color: #f00;
        height: 100px;
    }
}

考え方はEx.1と同じです。
今回は、box-shadowを上に移動させて下部コンテンツのtopに「擬似」二重線を作ってます。
下部コンテンツのtop以外は、コンテンツ全体で設定しているborderとなります。