border-width: 1.5pxに設定したときに、「あれれ、なんかよくわからんレンダリングが行われている」っていうことがあったので記します。レアケースなので、へーそういうことがあるんだというムダ知識として、あなたの生活を豊かにするかもしれません。

確認したブラウザ一覧

Google Chrome 83
FireFox 78 ¹
Edge 83
Internet Explorer 11

実装

以下は実装したコードとなります。

<!DOCTYPE html>
<html>
    <head>
        <style>
            hr {
                border: 0;
                border-top: 1px solid black;
                border-width: 1.5px;
                border-color: red;
            }
        </style>
    </head>
    <main>
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
    </main>
</html>

結果

Chromeブラウザにて表示されたものを見てみます。
見事にhrタグに設定したborderの太さがおかしいです。
なぜでしょうか。

考察

まず、styleタグ内に設定した内容をみてみます。

hr {
  border: 0;
  border-top: 1px solid black;
  border-width: 1.5px;
  border-color: red;
}

スタイルは上から順に評価されるので、

borderは上下左右ともに0を設定
borderの上のみ、1pxの黒い線を引く
borderの大きさは1.5pxを適用する（※ただし上にしか適用されない）
borderの色は赤に変更

そうです、そこまで変なことはしていなさそうです。
しかしborder-topを1にしているのに、border-widthを1.5にしているのがくさいですね。
なので、border: 0.75px solid red; などにして上下が1.5pxづつ領域をとるようにしてみましょう。

...とれませんか？
そうですか...ブラウザは1以下のピクセル指定、対応してなさそうですね...😇

まとめ

小数点を使用したピクセル指定、基本的にやめたほうが無難です😇
（※最終的に2pxに指定しました）

ちなみにFireFoxは均等な太さでレンダリングされています。 ↩