用纯html和css绘制带边框的棋盘

我已经用纯HTML和CSS完成了一个棋盘。但由于我不是设计师，我不知道如何做一件简单的事情。我想在黑板上画一个框架。我正在使用CSS border属性在

table.chessboard

元素（下面的代码）中创建边距。但是这个边距在棋盘内部扩大，并减少了边框上的方块

我能做些什么来解决这个问题

代码：

table.chessboard{
利润率：80px自动；
背景：#999；
边框：25px实心#333；
}
棋盘{
宽度：70px；
高度：70像素；
}
棋盘：第n个子（奇数）td.棋盘：第n个子（偶数），
棋盘：第n个子（偶数）棋盘：第n个子（奇数）{
背景：白色；
}

在css中：

table.chessboard { 
   border: 2px solid #000;
}

---

根据需要调整宽度；）

我假设您希望在所有单元格周围创建边框

table.chessboard{
利润率：80px自动；
背景：#999；
边框：25px实心#333；
边界塌陷：塌陷；/**/
}
棋盘{
宽度：70px；高度：70px；
边框：2倍实心#333；/**/
}
棋盘：第n个子（奇数）td.棋盘：第n个子（偶数），
棋盘：第n个子（偶数）棋盘：第n个子（奇数）{
背景：白色；
}

你只想在方格周围画一个轮廓吗？是的@HolyMoly，没错。看起来有人比我抢先一步，但下面有你的答案，这只是

边框

属性对不起，实际上边框是在棋盘周围，而不是在单元格周围。我正在编辑。如果我没有错的话，我认为在表格中，边框是其宽度的一部分。所以边界越大，单元越小。谢谢@HolyMoly，但由于我想要一个更大的边界（大约25像素），问题将持续存在。如果你将25px放入

电路板

类中，电路板边框旁边的方格会减少。我正在我的浏览器中查看它（带有你发布的代码），但看起来单元格没有缩小。你能把你看到的东西截图吗？除非页面中有一些其他元素和css没有发布，否则这似乎是预期的呈现是的，所有代码都在这里。我改变了。添加

边框折叠时：分离在
表中。棋盘
类问题已解决。