De kleur van een hr element veranderen

Ik denk dat je border-color moet gebruiken in plaats van color, als het je bedoeling is om de kleur van de lijn die door de <hr> tag wordt geproduceerd te veranderen.

Alhoewel, er is in commentaren op gewezen dat, als je de grootte van je regel verandert, de rand nog steeds zo breed zal zijn als je hebt opgegeven in stijlen, en de regel zal worden gevuld met de standaard kleur (wat meestal niet het gewenste effect is). Dus het lijkt erop dat je in dit geval ook achtergrondkleur moet specificeren (zoals @Ibu suggereerde in zijn antwoord).

HTML 5 Boilerplate project in zijn standaard stylesheet specificeert de volgende regel:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Een artikel getiteld "12 Little-Known CSS Facts", onlangs gepubliceerd door SitePoint, vermeldt dat <hr> zijn border-color kan instellen op zijn parent's color als u hr { border-color: inherit } specificeert.

hr
{
kleur: #f00;
achtergrondkleur: #f00;
hoogte: 5px;
}

hr
{
  background-color: #123455;
}

de achtergrond is degene die je moet proberen te veranderen

Je kan ook met de kleur van de rand werken. Ik ben niet zeker of er crossbrowser problemen zijn met dit. Je zou het moeten testen in verschillende browsers