JSFiddle - React, Tailwind, and code Playground

HTML

<table class="t">
    <tr>
        <td class="t">1</td>
        <td class="t top">2</td>
        <td class="t">3</td>
    </tr>
    <tr>
        <td class="t left">4</td>
        <td class="t middle">5</td>
        <td class="t right">6</td>
    </tr>
    <tr>
        <td class="t">7</td>
        <td class="t bottom">8</td>
        <td class="t">9</td>
    </tr>
</table>

CSS

table.t {
        border-collapse: collapse;
        border:1px;
        table-layout:fixed;
    }
    td.t {
        border:1px solid;
        width: 50px;
    }
    td.top {
        border-bottom: none;
    }
    td.left {
        border-right:none;
    }
    td.right {
        border-left: none;
    }
    td.bottom {
        border-top: none;
    }
    td.middle {
        border: 1px solid red;
        outline:1px dashed black;
        outline-offset:-1px;
    animation:blink 1s infinite;
    }
@keyframes blink {
    50% {outline:1px dashed yellow;}
}