CSSでいいカンジの破線をつくる

CSSで破線を作るとき、「border: 1px dotted #aaa」などと作ると思いますが、
これだと見た目がちょっとイマイチ・・。
ということで別のやり方で作ってみました。

デモはこちら

コードはこんな感じです。

background-image: linear-gradient(to right, #aaa, #aaa 2px, transparent 2px);
background-size: 4px 2px;
background-position: left top;
background-repeat: repeat-x;

背景を使うんですね。
これだとサイズを細かく指定することもできるし、間隔も設定できます。
しかし、コードを考えるのが面倒ですね・・。
と思ったらしっかりツールありました。

点線・破線CSSジェネレーター by Webspe Tools様

これで安心ですね。

今回は以上です！