ブラウザで異なるCSS点線の対処

少し前に思い出して調べ直した、CSSで点線を描写する際の対処方法を共有しておきます。

borderの点線はブラウザ毎に若干違う＆間隔設定不可

下記のようにCSSにborder-styleプロパティと値を記載し、何ら問題なく点線が描けるように思えますが、実は難点があります。

/* CSS */ 
border: 5px dotted #555 ;

↑（5pxの点線枠を色#555で表示させる）

まず、ブラウザによって”dotted”をどう描画するのか未だ異なり、特にSafariでは点が丸ではなく正方形です。さらに、border-styleでは点の間隔を設定できないため、自動調整されないと始点終点付近で均等に配置されない場合があります。

↑（safariでのborder:dotted。角をよく見てみると詰まっている）

↑（Chromeでのborder:dotted。円形）

細かな部分ですが意図しない描写となってしまうため対処が必要です。

reset.cssはCSSプロパティの解釈に影響しない

ちなみにブラウザ間CSS差異の問題を解決するreset.cssやnormalize.csは、あくまでも「各ブラウザが持つデフォルトのCSSの値を打ち消すもの」であり、「CSSプロパティの解釈自体を変えるもの」ではないためこの問題は解決できません。

【リセットCSSとは？】７つのリセットCSSを比較検証！ - WEBCAMP MEDIA

対処法①SVGに差し替える

borderを使うのではなく点線画像を事前に作成するか、SVGタグを使って描写させることで対応できます。事前に画像を別途作る場合、jpgなどピクセル画像形式だと解像度別に複数サイズ用意したり、円形部分がぼけやすかったりするのでSVG形式推奨。

もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ

HTML内に描写させる場合、具体的にはこのような感じです。strokeプロパティのstroke-linecapで点の形を、stroke-dasharrayで間隔をを設定できます。

<!-- HTML -->
<svg viewBox="0 0 405 10">
 <line x1="0" y1="0" x2="405" y2="0"/>
</svg>

/* CSS */ 
svg{ 
	width:405px;
	 height:20px; 
} 
svg line{ 
	fill: none; 
	stroke: #555 ;
	stroke-width: 10;
	stroke-linecap: round; 
         /* 線の端の部分を丸く、四角はsquare*/
	stroke-dasharray: 0.5, 20;
         /*　塗りと空白距離で間隔を設ける */
}

テキストの下に下線、下線を丸いドットにしたい。｜teratail

対処法②背景表示で対応する場合

正方形の点線をCSSだけで解決する場合はこちら。背景の「繰り返し」と「線形グラデーション」を組み合わせることで、点線に見せる方法です。

/* CSS */ 
background-size: 8px 1px;
background-repeat: repeat-x;
background-image: linear-gradient(to right, #000 , #000  3px, transparent 3px, transparent 8px);

線の太さと繰り返しの基準となるサイズを定め、
・右方向にグラデーション設定（to right）
・始点～終点の間に色を付け（#000, #000 3px）
・さらにその終点（始点）～終点8の間を透明に（ transparent 3px, transparent 8px）

などと設定することで間隔調整しながら色の境界をはっきり分け点線として表示させます。

dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法

以上です！何かすこしでも役に立てば嬉しいです。
コメントもお待ちしてます。