HTMLの表に、内側の境界線を適用する方法

ハイゼンベルク：

私は、HTMLのテーブルを持っている、と私は、各セルをクリックし、それのクラスを変更したいです outpatient

td, th {
    border: 5px ;
    cursor: pointer;
    padding: 2.5px;*/
    position: relative;
}

.outpatient {
    background-color: rgb(0,255,0);
    border: 5px solid aqua;

}

私はこのクラスをしようとしたときの結果は以下のようなものです。

これは、境界が崩れていないと、一部の細胞が歪んでいるようです。

https://gyazo.com/a6e5ef991b345934c070ed77d8949305

私はそれはそれの細胞に内側の縁取りされなければならないと思います。

どのように私はそれを修正することができますか？

感謝

alirizvi19：

私はあなたがそれに同意することを願っています。感謝

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

td, th {
    border:1px solid #ccc;
    cursor: pointer;
    padding: 2.5px;
    position: relative;
    text-align:center;
    box-sizing:border-box;
}

.outpatient {
    background-color: rgb(0,255,0);
    outline: 3px solid #546565;
    outline-offset: -4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
  </tr>
</table>