CSS – borderの重なりを消す

画像の例だと1pxで設定されているborderの線が重なっている部分が2pxとなって表示されてしまいます。この重なり部分を消す方法をいくつかご紹介します。

outlineを使う

次のコードのようにoutlineプロパティを追加してあげると重なり部分の線をうまくカバーすることができます。2px分使用してしまう点やoutlineプロパティの記述が増える可能性がある点がデメリットです。

.tabmenu .tab{
    border: 1px solid gray;
    outline: 1px solid gray;
}

重なっている部分のborder線をnoneとする

例えば重なっている部分の線をnoneとし最後の要素のみにborder-rightを追加するといった方法もあります。

.tabmenu .tab{
    border: 1px solid gray;
    border-right: none;
}
.tabmenu .tab:last-child{
    border-right: 1px solid gray;
}

最後の要素に追加したい場合のプロパティは上記以外にも:last-of-typeもありこちらも同様に使用することが可能です。