<h3>四角图案</h3>
<div class="content">
  HOC
</div>
<h3>圆角虚线边框</h3>
使用的图片
<img src="https://chuantu.biz/t6/324/1528275195x-1404775515.png"
  alt="">

<div class="dash-border-content">
  border-image
</div>

<h3>正常的dashed边框</h3>
<div class="normal-dash-content">
  border-style: dashed
</div>

div {
  width: 120px;
  height: 120px;
  margin: 20px 0;
  box-sizing: border-box;
}

.content {
  border: 26px solid transparent;
  border-image-source: url("http://www.w3school.com.cn/i/border.png");
  border-image-slice: 52;
  border-image-repeat: repeat;
}

.dash-border-content {
  border: 6px solid transparent;
  border-image-source: url("https://chuantu.biz/t6/324/1528275195x-1404775515.png");
  border-image-slice: 6 fill;
  border-image-repeat: round;
}

.normal-dash-content {
  border-radius: 4px;
  border: 2px dashed #000;
  padding: 4px;
}