【CSS】borderで点線・破線をデザインする方法！間隔調整や下線のカスタマイズも

Webサイトのデザインにおいて、区切り線や強調表現として「点線」や「破線」を使いたい場面は頻繁に訪れます。

CSSで線を引くこと自体は簡単ですが、「点の間隔をもっと広げたい」「丸いドットの線にしたい」といった細かい要望に応えようとすると、意外とつまづきやすいポイントでもあります。

この記事では、CSSの border プロパティを使った基本的な点線の引き方から、background プロパティなどを駆使して点線の間隔や形状を自由にカスタマイズする応用テクニックまでを幅広く解説していきます。

最新のWebデザインの現場でも使える、コピペ可能なサンプルコード付きで紹介しますので、ぜひ制作に役立ててください。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

CSSで基本的な点線・破線を引く方法（dottedとdashed）
線の太さ・色・位置を自由に指定する
1. 下線（アンダーライン）だけを点線にする
2. 角丸の点線を作る border-radius
「点線の間隔」を調整するカスタマイズテクニック
1. linear-gradientを使って破線の間隔を調整する
2. SVGを使って真円のドット間隔を調整する
HTML/CSSのスキルを活かして年収を上げる方法

CSSで基本的な点線・破線を引く方法（dottedとdashed）

CSSで点線を表示するために最も標準的な方法は、border-style プロパティを使用することです。

ここでは、点線（ドット）と破線（ダッシュ）の違いと、それぞれの基本的な記述方法について見ていきましょう。

丸い点線を引きたい場合はdotted

細かい点が連続する「点線」を引きたい場合は、border-style に dotted を指定します。

.dotted-line {
    border-style: dotted;
    border-width: 3px;
    border-color: #33ccff;
}

<div class="dotted-line">
    これはdotted（点線）の囲み枠です。
</div>

上記のコードでは、太さ3pxの水色の点線で要素が囲まれます。

長い破線を引きたい場合はdashed

点線よりも一つひとつの線が長い「破線」を引きたい場合は、border-style に dashed を指定します。

クーポン券の切り取り線のような表現によく使われます。

.dashed-line {
    border-style: dashed;
    border-width: 2px;
    border-color: #ff99cc;
}

<div class="dashed-line">
    これはdashed（破線）の囲み枠です。
</div>

dashed は dotted よりも線が長いため、控えめな区切り線として使いたい場合に適していると言えるでしょう。

まとめて指定するショートハンドborder

実務では、スタイル、太さ、色を個別に書くのではなく、border プロパティを使って一行でまとめて指定するのが一般的です。

/* border: 太さ スタイル 色; */
.simple-dotted {
    border: 2px dotted #555;
}

.simple-dashed {
    border: 2px dashed #555;
}

この書き方を覚えておけば、コードの記述量を減らし、可読性を高めることができます。

線の太さ・色・位置を自由に指定する

border プロパティは、上下左右すべての辺に線を引くだけではありません。

特定の辺だけに点線を引いたり、角を丸くしたりすることで、デザインの幅が大きく広がります。

下線（アンダーライン）だけを点線にする

見出しのデザインやリンクの装飾として、文字の下にだけ点線を引きたい場合は border-bottom を使用します。

h2.dotted-bottom {
    border-bottom: 3px dotted #ffad60;
    padding-bottom: 5px; /* 線と文字の隙間 */
}

padding-bottom で文字と線の距離を調整するのが、きれいに見せるコツです。

同様に、上線なら border-top、左線なら border-left を使用してください。

角丸の点線を作る border-radius

点線の枠の角を丸くしたい場合は、通常の枠線と同じように border-radius プロパティを併用します。

.rounded-dotted {
    border: 4px dotted #96ceb4;
    border-radius: 15px;
    padding: 20px;
}

border-radius を指定することで、点線自体も曲線に沿って配置されます。

柔らかい印象のデザインを作りたい場合に非常に有効なテクニックです。

「点線の間隔」を調整するカスタマイズテクニック

border プロパティは非常に便利ですが、一つだけ大きな弱点があります。
それは「点と点の間隔（隙間）を自由に調整できない」ことです。

ブラウザ任せの表示ではなく、デザインデータ通りに点の間隔を広げたい場合は、border ではなく background-image (linear-gradient) を使う方法が推奨されます。

linear-gradientを使って破線の間隔を調整する

CSSのグラデーション機能である linear-gradient を応用すると、自在に間隔を調整できる破線を作ることが可能です。

仕組みとしては、「色のついた部分」と「透明な部分」を交互に繰り返すことで、破線のように見せています。

.custom-dashed {
    /* 線自体の設定 */
    height: 2px; /* 線の太さ */
    
    /* 破線の設定 */
    background-image: linear-gradient(to right, #333 50%, transparent 50%);
    background-size: 10px 2px; /* 横幅10pxの中で線5px、透明5pxになる */
    background-repeat: repeat-x; /* 横方向に繰り返し */
    
    /* レイアウト調整 */
    width: 100%;
    margin: 20px 0;
}

<div class="custom-dashed"></div>

この方法のポイントは background-size です。

10px 2px と指定した場合、横幅10pxが1サイクルのパターンとなります。
linear-gradient で50%の位置で色を区切っているため、「5pxの線」と「5pxの隙間」が生成されます。

間隔をもっと広げたい場合は、background-size の横幅（1つ目の値）を大きくするか、グラデーションのパーセンテージを調整してみてください。

SVGを使って真円のドット間隔を調整する

dotted のような丸い点線で、かつ間隔を調整したい場合は、radial-gradient や SVG画像を背景に使う方法があります。

ここでは、より制御しやすく軽量なSVGを使った方法を紹介します。

.custom-dotted {
    height: 4px; /* 点の直径に合わせる */
    
    /* SVGで円を描画 */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 10" xmlns="
SVG namespace
www.w3.org(http://www.w3.org/2000/svg)"><circle cx="2" cy="2" r="2" fill="%23333333"/></svg>');
    
    background-size: 15px 4px; /* 横幅15pxに対して直径4pxの円、つまり11pxの隙間 */
    background-repeat: repeat-x;
}