重なったボーダー（枠線）が太くなるのを解消するには…？

※つぶやきです。スマートな解決法ではありません
タイトルの通りなんですが
例えばメニューの項目をボーダーで囲み
くっつける形にしたい
（主にスマホ用とか）

が、実際にやるとこうなります
↓ ↓ ↓

• トップページ
• 柴犬の特徴
• 柴犬の種類
• 柴犬あるある

気になる…(￣▽￣)
そこで今行っているのは
重なった（くっついた）ところだけ
ボーダーをnoneにするというやり方です

• トップページ
• 柴犬の特徴
• 柴犬の種類
• 柴犬あるある

HTML

<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">柴犬の特徴</a></li>
<li><a href="#">柴犬の種類</a></li>
<li><a href="#">柴犬あるある</a></li>
</ul>

CSS

ul{
display:flex;
flex-wrap:wrap;
list-style:none;
border:none;
}
ul li{
width:50%;
}
ul li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
padding:1em;
box-sizing:border-box;
border:1px solid #111;
}

/*本題ここから↓↓↓*/
ul li:first-child a, ul li:nth-child(3) a{
border-right:none;
}
ul li:first-child a, ul li:nth-child(2) a{
border-bottom:none;
}

ひとまず表示はできますが、
どうなのか… (￣▽￣)

tableを使い、border-collapseを使うという方法も
思いつきましたが
メニューならやっぱりリストを
使いたいし…ということで