I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property within the table.chessboard element (see code below), however, the margin seems to be expanding inside the board and shrinking the squares along the borders.
Does anyone have any suggestions on how I can resolve this issue?
Code:
table.chessboard {
margin: 80px auto;
background: #999;
border: 25px solid #333;
}
td.chessboard {
width: 70px;
height: 70px;
}
tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
background: white;
}<table class="chessboard">
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<!-- line above 8 times -->
</tr>
</table>