CSSでborderを二重線にする方法４種

二重線のボタン

「二重線のボタンを作りたい！」「二重線をデザインしたい！」

CSSでborderを二重線にする方法を4種類紹介します。

目的や条件に応じて適切なものを利用してください。

方法1.borderで二重線をひく

border-styleは線の種類を指定するCSSです。doubleにすると二重線になります。線の太さは2つの線とその隙間すべてたしたサイズです。

二重線のボタン

<style>
.example{
    /*コレ*/border: 6px double #0028ac;
    display: block;
    width: 200px;
    background: #cbe4fc;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}
</style>
<a class="example" href="#">二重線のボタン</a>

少ないコードで二重線ができますが、内側と外側の線に違いをつけたり線と線の隙間を調節することはできません。

方法2.outlineで外側に線をひく

outlineは外側に線を引くCSSです。これとborderでそれぞれ2つの線をひきます。

二重線のボタン

<style>
.example1{
    /*コレ*/border: 3px solid #289600;
    /*コレ*/outline: 5px solid #0028ac;
    /*コレ*/outline-offset: 5px;
    /*コレ*/margin: 10px;
    display: block;
    width: 200px;
    background: #cbe4fc;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}
</style>
<a class="example1" href="#">二重線のボタン</a>

borderが内側の線、outlineが外側の線です。

outline-offsetは線と線の隙間のサイズです。

線と線の隙間の色は透明であり、指定できません。

marginにはoutlineとoutline-offsetの合計値を指定しましょう。

比較的簡単なCSSで実現できますが、外側の線がクリック範囲に含まれていないというデメリットがあります。

方法3.親子それぞれに線をひく

親の線と子の線で二重線に見せる方法です。オススメです。

二重線のボタン

<style>
.example2{
    border: 5px solid #0028ac;
    display: block;
    width: 200px;
    background: #fff;
    padding: 5px;
    text-decoration: none;
}
.example2>span{
    border: 3px solid #289600;
    display: block;
    background: #cbe4fc;
    padding: 20px;
    text-align: center;
}
</style>
<a class="example2" href="#"><span>二重線のボタン</span></a>

「<a><span>ボタン</span></a>」のように親子関係のhtmlを用意します。

aに外側の線、spanに内側の線を指定しましょう。

aのbackgroundが線と線の隙間の色になります。同様にpaddingは隙間の大きさとなります。

方法4.afterを重ねて線をひく

beforeやafterを使って疑似的なhtmlを作り、それを重ねて二重線に見せる方法です。aタグ内にhtmlを追加できないときはこちらの方法がオススメです。

二重線のボタン

<style>
.example3{
    position: relative;
    border: 5px solid #0028ac;
    display: block;
    width: 200px;
    padding: 20px;
    background: #fff;
    text-align: center;
    text-decoration: none;
}
.example3::after{
    content: "二重線のボタン";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 5px;
    border: 3px solid #289600;
    background: #cbe4fc;
}
</style>
<a class="example3" href="#">二重線のボタン</a>

position: absoluteを使ってafterをaタグに重ねます。

left、right、top、bottomを0にするとaタグと同じサイズになります。

marginの数値が線と線の隙間のサイズになります。

【まとめ】borderを二重線にする方法

方法1.borderで二重線をひく

border-style:doubleでカンタンに二重線がひけます。細かい調整はできません。

方法2.outlineで外側に線をひく

borderで内側の線、outlineで外側の線をひきます。外側の線はクリック範囲に含まれません。

方法3.親子それぞれに線をひく

親に外側の線、子に内側の線をひきます。オススメの方法です。

方法4.afterを重ねて線をひく

aに外側の線、afterに内側の線を指定しabsoluteで重ねます。

aタグ一つでできる代わりにCSSは複雑です。

以上、CSSでborderを二重線にする方法４種でした。