原理：

代码：

<div class="corner-border">
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</div>

<style>
.corner-border ul,.corner-border li {list-style: none}
.corner-border li {margin:0 10px 0 0;padding:0;background-color: #eee;width: 150px;height: 150px;float:left;border:dashed 2px #eee;box-sizing:border-box;-moz-box-sizing:border-box;position:relative;}
.corner-border li:hover {border-color:red;}

.corner-border li:before {width:150px;height:80%;content:"";position: absolute;left:-2px;top:10%;border:solid 2px #eee;box-sizing:border-box;-moz-box-sizing:border-box;}
.corner-border li:after {width:80%;height:150px;content:"";position: absolute;top:-2px;left:10%;border:solid 2px #eee;box-sizing:border-box;-moz-box-sizing:border-box;}
</style>

via 前端观察