空のdivタグを利用しての囲みborder

Question

空のdivタグを利用して、borderのドットの幅を変更しました。
これ自体はきちんと反映されています。

今度は、４方面囲みのborderでこのドットを利用したいのですが、
どのように利用すればいいでしょうか？

今までの場合だと空のdivタグを挿入し、その場所に1本のborderを作っていたので、要素全体をこのborderで囲むやり方を教えていただきたいです。
調べ方が悪いのか検索しても出てきませんでした。

<div class="dot"></div>

.dot {
  height: 2px;
  margin: 0px 0 0 0;
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 2px);
  background-size: 5px 1px;
  background-position: top;
  background-repeat: repeat-x;
  }

Answer 1

以下のようなやりかただとダメですか?

border: 5px dotted #7f4600;

参照:
https://webparts.cman.jp/box/border/