SOURCE

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

ul {
    list-style-type: none;
    width: 100px;
    margin: 0;
    /* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
    padding: 0.5px;
}

li {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    /* simulates a 1px-wide border */
    border: 0.5px solid grey;
    outline: 0.5px solid grey;
}

li:hover {
    background-color: red;
    border-color: red;
    outline-color: red;
}