【CSS】点線を引く方法｜backgroundプロパティで間隔をカスタマイズ

CSSで点線を実装する際、まずborderプロパティのdottedを使用することが思い浮かぶと思います。

border: 1px solid dotted; のように指定すれば、簡単に点線を実装することができます。

しかし実際に使ってみると、

• 点線の間隔が調整できない
• 太さや見た目の自由度が低い
• デザインにこだわると限界がある

と感じることが多いのではないでしょうか。

そこでおすすめなのが、backgroundプロパティを使って点線を実装する方法です。

backgroundプロパティを使うことで、
点線の間隔・太さ・位置などなど、自由にカスタマイズすることができます。

今回は、backgroundプロパティを使用して点線を実装する方法について解説します。

基本：backgroundで点線を作る方法

横の点線を実装するサンプルコードです。

<div class="dotted-line"></div>

.dotted-line {
  width: 200px; // ①
  height: 2px; // ①
  background-image: linear-gradient(to right, #000 2px, transparent 2px); // ③
  background-size: 4px 2px; // ②
  background-position: left top; // ④
  background-repeat: repeat-x; // ⑤
}

STEP１：点線全体の横幅・縦幅を設定

width: 200px; // ①
height: 2px; // ①

STEP２：「点線と余白」のセット全体の大きさを設定

background-size: 4px 2px; // ②

STEP３：「点線と余白」それぞれの大きさと色を指定

background-image: linear-gradient(to right, #000 2px, transparent 2px); // ③

STEP４： 点線の開始地点を指定

background-position: left top; // ④

STEP５： 点線を繰り返す設定

background-repeat: repeat-x; // ⑤

応用：丸い点線を引く方法

丸い点線のデザインも多くあるので、実装方法をご紹介します。

.dot {
  width: 200px;
  height: 4px;
  background-image: radial-gradient(circle, #000 2px, transparent 2px);
  background-size: 8px 4px;
  background-repeat: repeat-x;
  background-position: left top;
}

丸を作っている部分

radial-gradient(circle, #000 2px, transparent 2px)

• circle → 円形にする
• 2px → 円の半径（＝点のサイズ）

transparent 2px の意味

これは「どこまで色を塗るかの境界指定」です。

分解すると

• #000 2px
  → 中心から 半径2pxまでは黒
• transparent 2px
  → 同じ2pxの位置から透明に切り替え

つまり

この2つが「同じ位置（2px）」で切り替わることで、
ぼかしなしのくっきりした円になります。

もしこう書いたら

radial-gradient(circle, #000 2px, transparent 4px)

2px〜4pxの間でグラデーションが発生します。

• 中心 → 黒
• 外側に向かって徐々に透明

つまり、ぼやけた円になります。

borderとの違い

borderプロパティの弱点

• 間隔調整できない
• 位置調整できない（外枠固定）
• デザインの自由度が低い

backgroundの強み

• 点線の間隔を自由に調整できる
• 好きな位置に配置できる
• 複数の線やアニメーションも可能

つまり、「見た目を作り込むならbackgroundプロパティ一択」です。

まとめ

最後に整理です。

• 手軽に使う → border
• デザインを作り込む → background

特に実務では、

• UIの区切り線
• カードデザイン
• フォーム
• 管理画面

などで活躍します。