css - css dot hr はドット/クリクルではなく小さな四角形のセットです

Question

ヘッダーの CSS スタイル シートに追加した部分は次のとおりです。

<style>

    body{
      background-color: #EAF6F6;
    }

    hr{
border-style: none;
border-top-style: dotted;
border-color: lightgrey;
border-width: 5px;
width: 5%;
    }

  </style>

そして、これがどのように見えるかです：

ご覧のとおり、ドットのような丸い形よりも正方形のように見えます。私がフォローしていたチュートリアルにはまったく同じコードがありましたが、最終的には点線とも呼ばれる小さなドットが並んでいました! 何故ですか？

Answer 1

<hr class="class-1" />     
.class-1 {
border: 5px dotted #000;
border-color: red;
}

このクラスを hr タグに含めてみてください