CSSで点線 / 破線の間隔やサイズを自由に調整する方法

更新日2025/11/18

borderプロパティで、簡単に点線 / 破線を引くことができますが、間隔やサイズの調整ができません。

そこで、CSSの「linear-gradient」や「radial-gradient」を使った、点線 / 破線の調整方法メモです。

手っ取り早くつくりたい、という人は「点線・破線CSSジェネレーター」がおすすめです。

linear-gradient を使って破線をつくる

backgroundプロパティに指定する linear-gradient を使って破線の間隔やサイズを任意に指定することができます。

HTML
<p class="custom_line_dashed">カスタマイズラインー破線</p>
CSS
.custom_line_dashed {
  background-size: 20px 2px;
  background-image: linear-gradient(to right, #000 0 10px, transparent 10px 20px);
  background-repeat: repeat-x;
  background-position: bottom;
  padding: 5px 10px;
}

表示例

カスタマイズラインー破線

linear-gradient でつくられるグラデーションを活かして以下のようなラインを作ることもできます。

HTML
<p class="custom_line_gradation01">カスタマイズラインー破線グラデーション</p>
CSS
.custom_line_gradation01 {
  background-size: 20px 5px;
  background-image: linear-gradient(to right, blue, transparent);
  background-repeat: repeat-x;
  background-position: left bottom;
  padding: 5px 10px;
}

表示例

カスタマイズラインー破線

このようなパターンも作れます。

HTML
<p class="custom_line_gradation02">カスタマイズラインー破線グラデーション</p>
CSS
.custom_line_gradation02 {
  background-size: 20px 2px;
  background-image:
    repeating-linear-gradient(to right, #fff 0 10px, transparent 10px 20px),
    linear-gradient(to right, green, blue, red);
  background-repeat: repeat-x; 
  background-position: bottom; 
  padding: 5px 10px;
}

表示例

カスタマイズラインー破線

1つのグラデーションを破線にするパターン。

HTML
<p class="custom_line_gradation03">カスタマイズラインー破線グラデーション</p>
CSS
.custom_line_gradation03 {
  background-image:
    repeating-linear-gradient(to right, #fff 0 10px, transparent 10px 20px),
    linear-gradient(to right, green, blue, red);
  background-position: bottom;
  background-size: 100% 5px;
  background-repeat: repeat-x;
}

表示例

カスタマイズラインー破線

radial-gradient を使って点線をつくる

点線の場合は radial-gradient を使います。

HTML
<p class="custom_line_dot">カスタマイズラインードット</p>
CSS
.custom_line_dot {
  background-image: radial-gradient(circle, #000000 6px, transparent 7px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 30px 14px;
}

表示例

カスタマイズラインードット

応用編

点と破線を組み合わせたライン。

HTML
<p class="custom_line_dashed_dot">点と破線の組み合わせ</p>
CSS
.custom_line_dashed_dot {
  background-image: repeating-linear-gradient(90deg, #000000, #000000 10px, transparent 10px, transparent 14px, #000000 14px, #000000 16px, transparent 16px, transparent 20px, #000000 20px, #000000 30px, transparent 30px, transparent 34px, #000000 34px, #000000 36px, transparent 36px, transparent 40px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
}

表示例

点と破線の組み合わせ

カテゴリー : HTML-CSS

HTML-CSS関連の記事