cssのborderの破線や点線は、通常間隔が調整できません。
ですので、borderの代わりにbackgroundを使用するCSSです。

擬似要素として破線のラインを設定しています。

擬似要素として破線のラインを設定しています。

<p class="background-dashed-line">擬似要素として下線の破線のラインを設定しています。</p>
<p class="background-dotted-line">擬似要素として下線の点線のラインを設定しています。</p>

.background-dashed-line{
  display:block;
  position:relative;
  padding-bottom:0.5em;
  &::before{
    content:"";
    width:100%;
    height:0.1em;
    display:block;
    background-image : linear-gradient(90deg, #000, #000 0.3em, transparent 0.3em, transparent 0.6em); 
    background-size: 0.6em 0.1em;          /* グラデーションの幅・高さを指定 */
    background-position: left center;  /* 背景の開始位置を指定 */
    background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
    position:absolute;
    bottom:0;
    left:0;
  }
}

.background-dotted-line{
  display:block;
  position:relative;
  padding-bottom:0.5em;
  &::before{
    content:"";
    width:100%;
    height:0.1em;
    display:block;
    background-image : linear-gradient(90deg, #000, #000 0.1em, transparent 0.1em, transparent 0.4em); 
    background-size: 0.4em 0.1em;          /* グラデーションの幅・高さを指定 */
    background-position: left center;  /* 背景の開始位置を指定 */
    background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
    position:absolute;
    bottom:0;
    left:0;
  }
}

4方向を囲む場合

以下は4方向を囲む場合のCSSです。

4方向の破線のCSS

.background-dashed-box{
  display:block;
  padding:1em;
  background-image :
    linear-gradient(to right, #000, #000 0.4em, transparent 0.4em, transparent 0.5em),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 0.4em, transparent 0.4em, transparent 0.5em), /* 右の線 */
    linear-gradient(to left, #000, #000 0.4em, transparent 0.4em, transparent 80.5em),  /* 下の線 */
    linear-gradient(to top, #000, #000 0.4em, transparent 0.4em, transparent 0.5em);   /* 左の線 */
  background-size:
    0.5em 0.1em,  /* 上の線 */
    0.1em 0.5em, /* 右の線 */
    0.5em 0.1em,  /* 下の線 */
    0.1em 0.5em;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}

4方向の点線のCSS

.background-dotted-box{
  display:block;
  padding:1em;
  background-image :
    linear-gradient(to right, #000, #000 0.1em, transparent 0.1em, transparent 0.5em),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 0.1em, transparent 0.1em, transparent 0.5em), /* 右の線 */
    linear-gradient(to left, #000, #000 0.1em, transparent 0.1em, transparent 80.5em),  /* 下の線 */
    linear-gradient(to top, #000, #000 0.1em, transparent 0.1em, transparent 0.5em);   /* 左の線 */
  background-size:
    0.5em 0.1em,  /* 上の線 */
    0.1em 0.5em, /* 右の線 */
    0.5em 0.1em,  /* 下の線 */
    0.1em 0.5em;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}