「四つ角」というワードで検索するとなかなか情報が出てこない。
毎度忘れて検索しがちなので備忘録のためにまとめておく。
DEMO（codepen.io）
borderを擬似要素で隠すイメージ
index.html
<divclass="wrapper"><span>wrapper</span></div>style.css
.wrapper{text-align:center;width:100px;position:relative;border:solid1pxblack;background-color:#fff;}.wrapper::before,.wrapper::after{position:absolute;content:"";display:block;background-color:#fff;}.wrapper::before{top:-1px;bottom:-1px;left:5px;right:5px;}.wrapper::after{top:5px;bottom:5px;left:-1px;right:-1px;}.wrapperspan{position:relative;z-index:1;}