◆ くっついてる要素のボーダーを表示する結合部分が二重になって太い
◆ 片方消すとアクティブなときに色を付けるときにめんどう
  ◆ 要素ごとに色が違う場合とか
◆ ボーダーの位置を重ねて z-index でアクティブな方を上にすると楽に済んだ

div などをくっつけて並べて それぞれにボーダーを表示するとき 単純にやるとくっついてる場所が二重になります
table の border-collapse みたいなのが必要です

div+div の隣接セレクタで一つ前との結合部分を非表示にしたり透明にしたりがスタンダードだと思います
しかしこれだと くっついている要素がそれぞれ色が異なるときに困ります
アクティブになっている要素だけ色を付けて 両側のボーダーもアクティブなものの色を優先します
一方向だけボーダーを見えなくする方法だと そこだけ色がつかなくなりますし 工夫してやっても CSS がわかりづらくなります

ちょっと苦戦したのですが くっついてる部分のボーダーを消すのではなく重ねるという方法にすると結構かんたんでした
ex-1 が単純に並べた例で ex-2 が重ねた例です
WebComponents にしてますが CSS や JavaScript の空間を分けたいだけなので特に意味はないです

<!doctype html>

<script>
customElements.define("ex-1", class extends HTMLElement {
connectedCallback() {
if(this.shadowRoot) return

this.attachShadow({mode: "open"})
this.shadowRoot.innerHTML = `
<style>
div {
display: flex;
}
span {
border: 8px solid #ccc;
padding: 10px 20px;
}

.a.selected {
border-color: red;
}
.b.selected {
border-color: blue;
}
.c.selected {
border-color: green;
}
</style>

<div>
<span class="a">A</span>
<span class="b">B</span>
<span class="c">C</span>
</div>
`

this.selected = null
this.spans = [...this.shadowRoot.querySelectorAll("span")]

this.shadowRoot.addEventListener("click", eve => {
if(eve.target.tagName === "SPAN") {
this.selected && this.selected.classList.remove("selected")
this.selected = eve.target
this.selected.classList.add("selected")
}
})
}
})

customElements.define("ex-2", class extends HTMLElement {
connectedCallback() {
if(this.shadowRoot) return

this.attachShadow({mode: "open"})
this.shadowRoot.innerHTML = `
<style>
div {
display: flex;
}
span {
border: 8px solid #ccc;
padding: 10px 20px;
position: relative;
}
span:nth-child(n + 2) {
margin-left: -8px;
}
.selected {
z-index: 1;
}

.a.selected {
border-color: red;
}
.b.selected {
border-color: blue;
}
.c.selected {
border-color: green;
}
</style>

<div>
<span class="a">A</span>
<span class="b">B</span>
<span class="c">C</span>
</div>
`

this.selected = null
this.spans = [...this.shadowRoot.querySelectorAll("span")]

this.shadowRoot.addEventListener("click", eve => {
if(eve.target.tagName === "SPAN") {
this.selected && this.selected.classList.remove("selected")
this.selected = eve.target
this.selected.classList.add("selected")
}
})
}
})
</script>

<ex-1 style="display: block; margin: 50px 100px"></ex-1>
<ex-2 style="display: block; margin: 50px 100px"></ex-2>

重ねる部分は 2 つ目以降にボーダーと同じサイズのマイナスマージンを指定で重ねてます
重なった部分は色がつく条件の .selected にだけ z-index をつけて上に来るようにしてます

これだけで済むので 結合部分の片方のボーダーを見えなくしてとか さらに隣がアクティブならボーダーのを色を隣に合わせてとか考えなくていいです
お手軽ですね