Wie zeichnet man einen geraden Tabellenrand mit unterschiedlichen Randbreiten?

Ich implementiere einen Kreuzworträtselgenerator. Es erzeugt ein Kreuzworträtsel mit einer Zeile pro Wort und einem Buchstaben pro Zelle, und das Schlüsselwort wird wie im Bild mit einem breiteren Rahmen und grauem Hintergrund markiert:

Um dies zu erreichen, ist mein generierter Code ungefähr folgender:

Mein Problem ist durch rote Ellipsen im Bild gekennzeichnet - der Rand des Schlüsselworts, der 1 Pixel breiter ist als der Rest, schneidet die obere und untere Zeile des Kreuzworträtsels. Ich habe versucht, border-collapse -Eigenschaft zu entfernen, aber das hat dazu geführt, dass doppelte Rahmen in jeder Zeilenverbindung angezeigt wurden.

Momentan verwende ich table , tr und td für die Generierung, aber wenn es eine Lösung gibt, die div s verwendet, werde ich mich freuen, zu wechseln.

Also meine Frage ist: angenommen, dass ich in der Lage bin, jede Zelle einzeln zu adressieren (einschließlich das Hinzufügen spezieller Klassen zu ihnen usw.), wie man den oberen und unteren Rand in der Schlüsselwort-Zelle statt außerhalb erscheinen lässt?

Ich habe eine Lösung gefunden mit box-shadow , aber es ist nicht wirklich browserübergreifend und beinhaltet viel Magie, also würde ich es lieber vermeiden wenn möglich.