見本

説明・補足

borderのdotsはドットとドットの間が調整できないので、backgroundを利用する方法。
角丸にも対応しているが、ドットサイズが大きいと場合によってはちょっと見苦しくなるかもしれない。

HTML

<div class="box_dot">
  <div class="box_dot_inner">
    <h3>余白のあるドット線</h3>
    <p>ドットの横幅のpx数、余白のpx数を任意の数値にすれば調整も簡単です</p>
  </div>
</div>

CSS

.box_dot{
  padding: 8px;
  background: #67b6b7;
}
.box_dot_inner{
  border-radius: 8px;
  background-image: linear-gradient(to right, #fff 2px, transparent 2px), linear-gradient(to bottom, #fff 2px, transparent 2px), linear-gradient(to left, #fff 2px, transparent 2px), linear-gradient(to top, #fff 2px, transparent 2px);
  background-size: 6px 2px, 2px 6px, 6px 2px, 2px 6px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: left top, right top, right bottom, left bottom;
}