borderのdottedやdashedを使って点線や破線を描くことができますが、この2種類のみで、それ以外の点線状のものは、css&nbs;borderでは描くことができません。画像を使わずに、cssのみで点線状のバリエーションを増やす場合は、「background-image:linear-gradient」を使います。

サンプルの（A）と（B）は、比較のため、borderを使ったものを掲載しています。（１）から「background-image:linear-gradient」を使った点線です。「background-size」を変更することで、（２）や（３）のように点と点の間隔を広げることができます。

サンプル

 

サンプル（１）の場合のhtmlのソース

（１）background-size: 3px 1px
  <div class="dot"></div>

サンプル（１）の場合のCSSのソース

.dot {
  height: 5px;
  margin: 5px 0 0 0;
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 2px);
  background-size: 3px 1px;　/* この値を変更 */
  background-position: top;
  background-repeat: repeat-x;
  }