Hallihallo!
Ich meine, mich dunkel zu erinnern, mal das gleiche Problem gehabt zu haben.
Versuche es doch mal "mit ohne" border (border: none;) und Deine ursprüngliche Definition nur als border-top bzw. -bottom zu benutzen.
hr { width:300px; border:1px dotted; color: #FF0000; }
hr { width:300px; border: none; border-top:1px dotted; color: #FF0000; }
Beste Grüsse,
Tobias Hahner