border dottedの間隔をCSSのみで調整する

CSSで点線を表示したい場合、以下のようにCSSを指定するかと思います。

border: dotted 1px #000;

これで点線は表示することはできるのですが、点線の間隔を任意の数値に設定することはできません。何かよい方法はないかと調べてみたところstack overflowで以下の方法を見つけました。(5年前の。。。)

How to increase space between dotted border dots

  • linear-gradient を使いグラデーションで点線を作る
  • それをbackground-imageに指定
  • それをリピートする

という方法です。
グラデーションで点線を作る方法ですが、ドット部分には色を指定し、間隔部分にはtransparent(透明)を指定します。

stack overflowに書かれているコードではlinear-gradientの色の開始、終了位置をパーセンテージで指定していますが、点線を作る場合、pxで指定した方が分かりやすく感じます。

以下サンプルコードです。

/*1px × 1pxのドットで間隔が4pxの点線をtopに表示*/
background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
background-size: 5px 1px;
background-position: top;
background-repeat: repeat-x;

/*1px × 1pxのドットで間隔が4pxの点線をrightに表示*/
background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
background-size: 1px 5px;
background-position: right;
background-repeat: repeat-y;

/*1px × 1pxのドットで間隔が4pxの点線をbottomに表示*/
background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
background-size: 5px 1px;
background-position: bottom;
background-repeat: repeat-x;

/*1px × 1pxのドットで間隔が4pxの点線をleftに表示*/
background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
background-size: 1px 5px;
background-position: left;
background-repeat: repeat-y;

そして毎回このコードを書くのはしんどいので、postcssのプラグインにしました。

postcss-dotted-border

参考記事

How to increase space between dotted border dots