/* --- Dottedスタイル --- */
.separator1 {
height: 2px;
border: none;
border-top: 2px #ff0000 dotted; /* 枠線 */
}

/* --- Dashedスタイル --- */
.separator2 {
height: 2px;
border: none;
border-top: 2px #0000ff dashed; /* 枠線 */
}

<hr class="separator1">

<hr class="separator2">