CSSで破線・点線の間隔を調整する方法【linear-gradientで実現】

公開日: 2023.06.09
最終更新日: 2026.07.17

CSSで引いた破線や点線、「もう少し間隔を広げたい」「デザインカンプの見た目に合わせたい」と思っても、border-style: dashed;やdotted;では線と余白の間隔を調整できません。ブラウザ任せの間隔になってしまうのが、地味に悩ましいところです。

結論から言うと、画像を使わなくても、linear-gradient()で破線・点線を背景として描き、background-sizeで間隔を制御することで自由に調整できます。この記事では、基本的な破線・点線の書き方から間隔を調整する方法、そして上下左右すべてのボーダーへ応用する方法までを解説します。

1 基本的な破線／点線の書き方
2 間隔を調整する方法
3 上下左右すべてのボーダーを表現する方法
4 まとめ

基本的な破線／点線の書き方

まずは通常の書き方の確認です。CSSで破線や点線を引くときは、次のようにborder-styleを指定します。

.bb-dashed {
    border-bottom: 1px dashed #cccccc;
}

.bb-dotted {
    border-bottom: 1px dotted #cccccc;
}

手軽ではありますが、この方法では線の間隔がブラウザ依存で決まり、こちらから調整することができません。では、間隔を思いどおりにコントロールするにはどうすればよいのでしょうか。

間隔を調整する方法

破線や点線を画像として書き出し、背景画像に設定する方法もあります。ただ、色や太さを変えるたびに画像を作り直す手間がかかるため、できればCSSだけで完結させたいところです。

そこで役立つのがlinear-gradient()です。「線の部分」と「透明な部分」を1セットのグラデーションとして作り、それをbackground-sizeで区切って横方向に繰り返せば、間隔を自由に決めた破線を描けます。

.bb-dashed2 {
    /* 線の長さ2pxの線を背景画像とする */
    background-image: linear-gradient(to right, #000 2px, transparent 2px);
    /* 背景画像の大きさを設定 */
    background-size: 10px 1px;
    /* 背景の開始位置を指定 */
    background-position: left bottom;
    /* 横方向に繰り返す */
    background-repeat: repeat-x;

}

ここがこの手法の肝です。linear-gradient(to right, #000 2px, transparent 2px)で「左から2pxまでは黒、そこから先は透明」というパターンを作り、background-size: 10px 1px;でそれを10px幅・高さ1pxの単位に区切ります。結果として「2pxの線＋8pxの余白」が1セットになり、これをrepeat-xで横に繰り返すことで破線が完成します。

間隔を変えたいときはbackground-sizeの幅（この例では10px）を調整するだけです。数字を大きくすれば余白が広がり、破線がまばらになります。またbackground-positionをleft bottomにしているのは、線を要素の下端に配置するためです。上端に引きたい場合はleft topに変更します。

点線にしたい場合は、次のように設定します。

.bb-dotted2 {
    /* ドットの大きさ2 × 2pxの点を背景画像とする */
    background-image: linear-gradient(to right, #000 2px, transparent 2px);
    /* 背景画像の大きさを設定 */
    background-size: 12px 2px;
    /* 背景の開始位置を指定 */
    background-position: left bottom;
    /* 横方向に繰り返す */
    background-repeat: repeat-x;
}

考え方は破線と同じで、線を短く（2px）、高さも2pxにすることで点状にしています。この例では「2×2pxのドット＋余白」を繰り返しており、こちらもbackground-sizeの幅で間隔を調整できます。

ひとつだけ注意点があります。border-style: dotted;のドットは丸型ですが、この方法で作るドットは四角形になります。linear-gradient()は矩形で色を区切るため、丸いドットは表現できません。ここは割り切って使う必要があります。

色や太さも自由に変えられます。線の色はlinear-gradient()内の#000を好きな色に、太さはbackground-sizeの2つ目の値（縦のサイズ）を変えることで調整できます。画像と違って作り直しが不要なので、デザインの微調整がその場で完結するのも大きな利点です。linear-gradient()による背景は主要なモダンブラウザで問題なく表示できるため、実務でも安心して使えます。

上下左右すべてのボーダーを表現する方法

ここまでは下線（border-bottom相当）を例にしてきましたが、linear-gradient()を4つ重ねて指定すれば、上下左右すべての辺を破線・点線で囲むこともできます。

.dashed2 {
    /* 線の長さ2pxの線を背景画像とする */
    background-image:
    linear-gradient(to right, #000 2px, transparent 2px),
    linear-gradient(to bottom, #000 2px, transparent 2px),
    linear-gradient(to left, #000 2px, transparent 2px),
    linear-gradient(to top, #000 2px, transparent 2px);

    /* 背景画像の大きさを設定 */
    background-size:
    10px 1px,
    1px 10px,
    10px 1px,
    1px 10px;

    /* 背景の開始位置を指定 */
    background-position:
    left top,
    right top,
    right bottom,
    left bottom;

    /* 横方向に繰り返す */
    background-repeat:
    repeat-x,
    repeat-y,
    repeat-x,
    repeat-y;
}

.dotted2 {
    /* ドットの大きさ2 × 2pxの点を背景画像とする */
    background-image:
    linear-gradient(to right, #000 2px, transparent 2px),
    linear-gradient(to bottom, #000 2px, transparent 2px),
    linear-gradient(to left, #000 2px, transparent 2px),
    linear-gradient(to top, #000 2px, transparent 2px);

    /* 背景画像の大きさを設定 */
    background-size:
    12px 2px,
    2px 10px,
    10px 2px,
    2px 10px;

    /* 背景の開始位置を指定 */
    background-position:
    left top,
    right top,
    right bottom,
    left bottom;
    
    /* 横方向に繰り返す */
    background-repeat:
    repeat-x,
    repeat-y,
    repeat-x,
    repeat-y;
}

4本の線を、それぞれ上（to rightで横方向）、右（to bottomで縦方向）、下、左に配置しています。background-image・background-size・background-position・background-repeatを、いずれも4辺ぶんカンマ区切りで並べているのがポイントです。並び順が一致していれば、辺ごとに間隔や向きを個別に調整できます。