边框怎么做出这样的效果啊

border+一个absolute定位的和背景色一样的正方形div来实现。帮助到你能点个采纳吗，谢谢~

<style>
    .good{border-collapse:collapse;background:#5f5750}
    .good td{width:100px;height:100px;display:inline-block;position:relative;border:solid 1px #ccc}
    .good td div.square{position:absolute;bottom:-20px;right:-20px;background:#5f5750;width:40px;height:40px;z-index:9}
</style>
<table class="good">
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

可以用:after和:before 伪元素做

代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">

#lp {
    width: 404px;
}
#box {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0px 1px 1px 0px;
    float: left;
}
#box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}
#box:after {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 80%;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}

</style>

</head>
<body>
<div id="lp">
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
    <div id="box">
    </div>
</div>
</body>
</html>