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 selected">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 black;
    width: 50px;
}

td.top {
    border-bottom: 1px dashed black;
}
td.left {
    border-right: 1px dashed black;
}
td.right {
    border-left: 1px dashed black;
}
td.bottom {
    border-top: 1px dashed black;
}
td.middle {
    border: 1px dashed black;
}

td.selected {
    -webkit-animation: pulse-border 1s infinite;
}

@-webkit-keyframes pulse-border {
    from, to { box-shadow: 0 0 0 0 black;}
    50% { box-shadow: 0 0 0 4px black; }
}