【初心者向け】CSS border 点線の基本と応用｜下だけ点線・丸い点線・テキスト下線まで網羅

Webデザインをしていると、「ここは実線より点線のほうがしっくりくる」という場面がありますよね。たとえばセクションの区切りや、ちょっとした装飾を入れたいときなどです。しかし実際にCSSで点線を指定しようとすると「border-style: dotted; は知っているけど太さや色の調整はどうするの？」「破線（dashed）と点線（dotted）の違いがよくわからない」「角丸の枠線を点線で描けないのかな」といった疑問にぶつかることも少なくありません。さらにブラウザによって見え方が違ったり、印刷すると意図と違う出力になったりと、意外と奥が深いのが“点線ボーダー”です。

この記事では、CSS初心者でもすぐに実装できる基本の書き方から、現場で役立つ応用テクニックまでを体系的に整理しました。コピペで使えるサンプルコードも紹介しているので、実務ですぐに反映させたい方にも役立ちます。

「CSS border 点線」と検索してここにたどり着いた方なら、知りたかったポイントがすべて網羅されているはずです。基本を押さえつつ、プロの現場でも通用する点線デザインを一緒にマスターしていきましょう。

CSSで点線ボーダーを作る基本と応用

Webデザインにおいて、ボーダー（境界線）は要素の視覚的な区切りや装飾に欠かせないプロパティです。中でも点線ボーダーは、柔らかい印象を与えたり、注意を引くためのアクセントとして頻繁に使われます。ここでは、CSSで点線ボーダーを表現する最も基本的な方法から、その見た目をコントロールする応用テクニックまでを詳しく解説します。

border-style: dotted; の基本構文と使い方

CSSで点線ボーダーを実装する最もシンプルかつ基本的な方法は、border-styleプロパティにdottedを指定することです。このプロパティは、ボーダーの「線の種類」を定義します。

基本構文:

セレクタ {
  border-style: dotted;
}

この一行を追加するだけで、要素の四方に点線ボーダーが適用されます。しかし、実際には線の太さや色も同時に指定することがほとんどです。そのため、通常は**ショートハンド（一括指定）**で記述するのが一般的です。

ショートハンドでの記述例:

borderプロパティを使うと、border-width（線の太さ）、border-style（線の種類）、border-color（線の色）の3つの値をまとめて指定できます。

<div class="dotted-box">
  点線ボーダーのボックス
</div>

/* CSSファイル */
.dotted-box {
  /*
  * borderプロパティのショートハンド
  * 値の順序は「太さ 種類 色」
  */
  border: 2px dotted #ff6347; /* 2pxの点線で、色はトマト色 */
  padding: 20px;
}

このコードを実行すると、dotted-boxクラスの<div>要素の周りに、2pxの太さでトマト色（#ff6347）の点線ボーダーが表示されます。このショートハンドを使いこなすことが、効率的なコーディングの第一歩です。

点線（dotted）・破線（dashed）・実線（solid）の違いと見え方比較

border-styleプロパティにはdotted以外にも様々な値があります。その中でも、点線と混同しやすいのが破線です。ここでは、特に使用頻度の高い3つのスタイルを比較してみましょう。

• dotted: 正方形や丸の点が連続して並びます。点と点の間隔は、ブラウザや線の太さによって自動的に調整されます。
• dashed: 長方形の短い線（ダッシュ）が連続して並びます。これも線の太さによって見た目が変わります。
• solid: 一般的な実線です。途切れることなく連続した線になります。

それぞれの特徴を理解することで、デザインの意図に合わせて最適なスタイルを選択できるようになります。点線は柔らかく装飾的な印象、破線は注意喚起やセクションの区切り、実線は最も基本的な境界線として使い分けられます。

border-width・border-colorで点線の太さと色を調整する方法

点線ボーダーをさらにカスタマイズするためには、border-widthとborder-colorプロパティを個別に指定する方法を学ぶことが不可欠です。

• border-width: ボーダーの太さを設定します。px（ピクセル）やem（文字の相対サイズ）など、様々な単位で指定可能です。
• border-color: ボーダーの色を設定します。16進数カラーコード（例: #000000）、RGB値（例: rgb(0, 0, 0)）、色名（例: black）などが使えます。

個別プロパティでの記述例:

ショートハンドを使わずに、一つずつプロパティを設定する場合のコードです。

<div class="custom-border">
  太さと色を調整した点線
</div>

/* CSSファイル */
.custom-border {
  border-style: dotted;      /* スタイルを点線に設定 */
  border-width: 4px;         /* 太さを4pxに設定 */
  border-color: #3cb371;      /* 色をミディアムシーグリーンに設定 */
  padding: 20px;
}

このように個別で指定することで、より細かくボーダーの見た目をコントロールできます。また、border-widthやborder-colorは、border-top-widthのように辺ごとに指定することも可能です。次のセクションでは、この辺ごとの指定方法をさらに掘り下げていきます。

より高度な点線表現とカスタマイズテクニック

点線ボーダーの基本的な使い方は理解できましたね。ここからは、実務で役立つ、さらに高度な表現方法やカスタマイズテクニックを紹介します。単なる四角い点線だけでなく、特定の位置にだけ引いたり、角丸のボックスに適用したりする方法を学び、デザインの幅を広げましょう。

border-bottomだけ点線にする指定方法と実例

Webデザインでは、見出しの下線やコンテンツの区切り線として、特定の辺にだけボーダーを適用するケースが頻繁にあります。CSSでは、border-top, border-right, border-bottom, border-leftという個別のプロパティを使って、特定の辺にだけスタイルを適用できます。

構文:

セレクタ {
  border-bottom-style: dotted; /* 下辺のみ点線にする */
  border-bottom-width: 2px;
  border-bottom-color: #ccc;
}

このプロパティもショートハンドで記述することが可能です。border-bottom: 2px dotted #ccc; のように書くことで、より簡潔に指定できます。

実例：見出しの下線として使う

<h2 class="section-title">
  最新のサービス
</h2>
<p>
  サービスの詳細をここに記載します。
</p>

/* CSSファイル */
.section-title {
  /*
  * 見出しの下に点線の区切り線を引く
  * 文字と線の間にスペースを開けるためにpadding-bottomを使用
  */
  border-bottom: 2px dotted #000;
  padding-bottom: 5px;
  display: inline-block; /* 下線を文字幅に合わせる */
}

このテクニックを使えば、デザイン性の高い区切り線を簡単に実装できます。display: inline-block; を指定することで、線の幅を見出しのテキスト幅に合わせるのがポイントです。

角丸ボックスに点線を適用する方法（border-radiusとの併用）

おしゃれなWebデザインでは、ボーダーに角丸を適用することがよくあります。border-radiusプロパティを使えば、点線ボーダーにも角丸を適用できます。

構文:

セレクタ {
  border: 2px dotted #000;
  border-radius: 10px; /* 角を10pxの半径で丸める */
}

注意点:

border-radiusで角丸を適用した際に、点線が途切れて見えたり、角が滑らかにならなかったりする場合があります。これは、点線（dotted）が丸ではなく正方形で描画されるブラウザがあるためです。特にSafariや古いFirefoxなど、ブラウザによる描画の違いが顕著です。

より安定した角丸の点線を実現したい場合は、dashedボーダーを使い、破線の間隔を工夫する方が良い結果を得られることがあります。

点線の間隔や丸い点線を表現する応用テクニック（border-image, backgroundなど）

border-style: dotted; では、点の形や間隔を自由に調整することはできません。より自由度の高い点線デザインを求める場合は、borderプロパティ以外の方法を検討する必要があります。

1. border-image を使ったカスタム点線

border-imageプロパティを使うと、画像ファイルをボーダーとして適用できます。これにより、Photoshopなどで作成したオリジナルの点線画像を使うことが可能になります。

簡単な構文:

セレクタ {
  border: 10px solid transparent; /* 太さの確保と透明化 */
  border-image: url("dot_pattern.png") 30 repeat;
}

この方法は非常に強力ですが、画像の準備が必要で、レスポンシブデザインでの調整が難しいというデメリットもあります。

2. background-image と background-size を使ったテクニック

最も柔軟で汎用性の高い方法は、borderプロパティを使わず、background-imageで点線を表現することです。linear-gradient() を使って小さな点を生成し、background-sizeでその間隔を調整します。

実例：テキストの下に自由な間隔の点線を引く

.underline-dotted {
  /*
  * 背景に線形グラデーション（小さな円）を作成し、繰り返して点線を表現
  * background-image: radial-gradient(...) で丸い点線を作る
  * background-position: 0 100% で下辺に配置
  */
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-position: 0 100%;
  background-size: 8px 2px; /* 水平方向の間隔、垂直方向の太さ */
  background-repeat: repeat-x; /* 水平方向にのみ繰り返す */
  padding-bottom: 5px;
}

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

このテクニックの利点は、background-sizeの値を調整するだけで、点線の間隔を自由に変更できることです。また、radial-gradientを使うことで、border-style: dotted;では表現できない、完璧な丸い点線を作ることができます。これは、デザインの細部にこだわるWebエンジニアにとって非常に強力な武器となります。

実務で使える点線デザインの応用と便利ツール

点線ボーダーの基本的な書き方やカスタマイズ方法を学んだら、次はそれを実務でどのように応用していくかを考えてみましょう。ここでは、Webサイト制作で頻繁に使うHTMLタグを点線にカスタマイズする方法や、意外と見落としがちなブラウザ間の表示差、そしてそれを解決するための便利なツールについて解説します。

HTMLの<hr>タグを点線にカスタマイズする方法

HTMLの<hr>タグは、セクション間の区切り線として使用されます。デフォルトでは実線で表示されますが、CSSを適用することで簡単に点線に変えることができます。この方法は、シンプルながらもコンテンツの視認性を高める上で非常に有効です。

<hr>タグのデフォルトスタイルをリセットする

多くのブラウザでは、<hr>タグにデフォルトのスタイル（borderやcolor）が設定されています。そのため、まずはこれらのデフォルトスタイルをリセットする必要があります。

/* `<hr>`タグのデフォルトスタイルをリセット */
hr {
  border: none; /* デフォルトのボーダーを無効化 */
  height: 1px; /* 高さを設定 */
  background-color: #ccc; /* 背景色を設定して実線に見せる */
}

点線にカスタマイズする

上記のリセットコードをベースに、borderプロパティを使って点線ボーダーを適用します。上下の余白を調整することで、見た目をよりきれいに整えられます。

<section>
  <h2>セクション1</h2>
  <p>最初のコンテンツエリアです。</p>
</section>
<hr class="dotted-divider">
<section>
  <h2>セクション2</h2>
  <p>次のコンテンツエリアです。</p>
</section>
<hr class="dotted-divider-02">
<section>
  <h2>セクション3</h2>
  <p>次のコンテンツエリアです。</p>
</section>

/* `<hr>`タグのデフォルトスタイルをリセット */
hr {
  border: none; /* デフォルトのボーダーを無効化 */
  height: 1px; /* 高さを設定 */
  background-color: #ccc; /* 背景色を設定して実線に見せる */
}

hr.dotted-divider {
  /*
  * `<hr>`のデフォルトスタイルをリセットし、下点線のみを適用
  * border-top: 1px dotted #999; と上下どちらかに指定することで点線に
  */
  border-top: 2px dotted #999;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 30px 0; /* 上下の余白を調整 */
}

hr.dotted-divider-02 {
  /* box-shadowで実現する方法もあります */
  border: none;
  box-shadow: 0 1px 0 0 #000;
}

この方法で、セクションの区切りを視覚的に分かりやすく表現できます。

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

テキストの下線を点線にするCSS（text-decoration-style: dotted;）

リンクや特定のテキストに点線の下線を引きたい場合、border-bottomを使う方法もありますが、よりセマンティック（意味的）な方法としてtext-decorationプロパティを使用する方法があります。

text-decoration-styleの基本

CSS3で導入されたtext-decoration-styleプロパティを使えば、テキストの下線の種類を簡単に変更できます。

/* テキストの下線を点線にする */
a {
  text-decoration: underline; /* 下線を有効化 */
  text-decoration-style: dotted; /* 下線のスタイルを点線に */
  text-decoration-color: #007bff; /* 下線の色を変更 */
}

この方法の利点は、文字のベースラインに沿って下線が引かれるため、文字サイズや行の高さを変更しても、常に適切な位置に表示されることです。

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

古いブラウザへの対応

ただし、text-decoration-styleは比較的新しいプロパティのため、IE11など一部の古いブラウザではサポートされていません。このような場合、互換性を確保するためにborder-bottomを使うのが一般的です。

/* 互換性を考慮した下線（古いブラウザ向け） */
.compatible-underline {
  border-bottom: 1px dotted #007bff; /* 下辺ボーダーを適用 */
  text-decoration: none; /* デフォルトの下線を無効化 */
}

border-bottomは、文字のサイズやpaddingに影響を受けやすいため、微調整が必要になることがあります。text-decoration-skip-ink: none; プロパティを併用することで、文字と下線の重なりを防ぐこともできます。

ブラウザ差異・印刷時の点線表示やトラブル対策（Chrome／Safari／Edge）

CSSのプロパティは、ブラウザによって描画方法がわずかに異なることがあります。点線ボーダーも例外ではありません。特に注意したいのが、border-style: dotted; の「点」の形状です。

• Chrome, Firefox, Edge: dottedボーダーは丸い点で描画されることが多いです。
• Safari: dottedボーダーは、デフォルトで四角い点として描画される傾向があります。

このような差異は、デザインカンプとのずれを生む原因になります。もし完璧な見た目を求めるのであれば、前述のbackground-imageを使ったテクニックが有効です。

印刷時の注意点

もう一つの潜在的な問題が、印刷時の挙動です。ブラウザは印刷時にWebページを「印刷モード」に切り替えますが、その際に一部のCSSプロパティが異なる解釈をされることがあります。特に、点線や破線が実線に置き換わってしまうケースが報告されています。

これを回避するためには、印刷用のスタイルシート（@media print）でborder-style: solid; を明示的に指定し、実線に切り替えてしまうのが確実な解決策の一つです。または、background-imageで点線を表現する方法であれば、印刷モードでも見た目が安定することが多いです。

よくある質問（FAQ）

点線ボーダーの実装では、基本的なプロパティの指定方法だけでなく、細かなデザイン調整やブラウザごとの挙動に関する疑問がよく生じます。ここでは、駆け出しエンジニアが特に疑問に感じやすい点について、Q&A形式で詳しく解説します。

コストパフォーマンスに優れた高性能なレンタルサーバー

まとめ

この記事では、「CSSで点線ボーダーを作る」というテーマを深く掘り下げ、駆け出しのWebエンジニアが直面するであろう疑問や課題を解決するための実践的な知識を網羅的に解説しました。基本的な書き方から、実務で使える応用テクニック、そして予期せぬトラブルへの対処法まで、点線ボーダーに関するあらゆる知識を網羅できたはずです。

まず、最も基本となるborder-style: dotted;の構文と、border: 2px dotted #000;のようなショートハンドでの効率的な書き方を学びました。これは、日々のコーディングで最も頻繁に使うことになるでしょう。また、点線（dotted）と破線（dashed）、実線（solid）の違いを理解し、デザインの意図に合わせて適切に使い分けることの重要性についても触れました。

さらに、より高度な表現として、border-bottomやborder-topなどの個別プロパティを使って特定方向だけにボーダーを引く方法や、border-radiusと組み合わせて角丸の点線を実現するテクニックを学びました。これらは、デザインの幅を広げ、より洗練された見た目を作る上で欠かせないスキルです。

そして、記事の後半では、プロの現場で役立つ実践的な応用テクニックに焦点を当てました。text-decoration-styleを使ったテキスト下線の点線化や、HTMLの<hr>タグをカスタマイズする方法は、すぐにでも業務で活用できるはずです。加えて、ブラウザごとの表示差異や印刷時の挙動といった、予期せぬトラブルへの対処法についても解説しました。特に、background-imageとbackground-sizeを使ったテクニックは、borderプロパティの制約を超えた、自由な点線表現を可能にする強力な武器です。

この記事で得た知識は、単に「点線を引く」という一つのタスクをこなすだけでなく、CSSの様々なプロパティの組み合わせ方や、ブラウザの挙動を深く理解する上での足がかりとなります。点線ボーダーは小さな要素かもしれませんが、その一つ一つを丁寧に、そして正確に実装する姿勢が、質の高いWebサイトを構築する上で非常に重要です。

ぜひ、この記事で学んだことを活かし、あなたのWeb制作の引き出しを一つ増やしてください。点線ボーダーを使いこなして、より魅力的でユーザーフレンドリーなデザインを形にしていきましょう。

あわせて読みたい

CSSで丸の中に文字を中央に置く方法！正円・楕円・画像対応の実装例【コピペOK！】

CSSだけで丸の中に文字を中央揃えする方法を、基本から解説。1行テキストの中央配置はもちろん、2行以上の複数行や楕円形にも対応。画像やアイコンとの組み合わせ、レスポンシブ対応、再利用可能なパーツ設計、TailwindやSCSSによる効率化もカバー。コピペで使える実用コード付きで、UIづくりをサポート!

watashi.xyz

2025.07.06