Colored line showing on custom HR.

Not sure what else to say, here's the snippet:

hr.white{
border-bottom:2.5px dotted white;
background: none;
width: auto;
}

On the Squarespace builder there is no colored line, but when viewing on Chrome/Safari there is a slight colored bar above the dotted line. Is there any way to remove this? Example attached.

Thanks in advance!

Also, if there is a better way to achieve this let me know, I tried changing 'line color' in the palette and it didn't change the color of the dotted line.

Can you share link to page in screenshot? We can check easier