CSSのみで1px以上の間隔のボーダーを作る

通常CSSのborderのdottedは、1px間隔のボーダーになります。
ですが、デザイン的には1px間隔以上のドットのボーダーを使う局面はよくあると思います。そのたびに、背景画像でその部分を作るのは、なんだかもう時代遅れな感じがしたので、cssのみで作れないかと思って調べていたら、グラデーション背景を使うことで作れそうだったのでmixinを作りました。以下Sass表記です。

=dotted($pos: left,$color:rgba(#000, 1.0), $stripe: 1, $spacing: 4, $width:1)
  border: none
  @if $pos == left or $pos == right
    background: linear-gradient(to bottom,$color 0%,$color $stripe/($stripe+$spacing)*100%,transparent $stripe/($stripe+$spacing)*100%,transparent 100%)
    background-repeat: repeat-y
    background-size: ($width)*1px ($stripe+$spacing)*1px
    background-position: $pos ($stripe)*1px
  @else if $pos == top or $pos == bottom
    background: linear-gradient(to left,$color 0%,$color $stripe/($stripe+$spacing)*100%,transparent $stripe/($stripe+$spacing)*100%,transparent 100%)
    background-repeat: repeat-x
    background-size: ($stripe+$spacing)*1px ($width)*1px
    background-position: ($stripe)*1px $pos

See the Pen dotted border mixin by TAKAYASU SAGAWA (@shagggy) on CodePen.

+dotted(ボーダー位置[top,bottom,left,right],ボーダーの色,ドットの幅,ドットの間隔)

で使えます。

おそらくそのうち、cssで正式に対応する部分ではあると思いますが、それまでは便利に使えると思います。