border-color适用于Chrome和Safari浏览器。 background-color适用于Firefox和Opera。 颜色工作在IE7+。

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

这样做可以让你在需要的时候改变高度。祝你好运。来源:如何用CSS样式HR

因为我没有声誉来评论，我将在这里给出一些想法。

如果你想要一个可变高度的CSS，去掉所有的边框，并给出一个背景色。

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or hr{ height:0px; border:0px; border-top:2px solid blue; margin:0px;/*useful sometimes*/ } In both ways, if you set a width, it will always have it's size. No need to set display:block; for this. To be totally safe, you can mix both, 'cause some browsers can get confused with height:0px;: hr{ height:1px; border:0px; background:blue; border-top:1px solid blue; margin:0px;/*useful sometimes*/ } With this method you can be sure that it will have at least 2px in height. It's a line more, but safety is safety. This is the method you should use to be compatible with almost everything. Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing. In the worst cases, you can try to add color:blue;. In the worst of the worst cases, you can try to use a <font color="blue"></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color. With this method, you WILL want to do like this: <hr width="50" align="left"/>. Example: <span> awhieugfrafgtgtfhjjygfjyjg <font color="#42B3E5"><hr width="50" align="left"/></font> </span> <!--Doesn't work in ie7 and below and in Quirks Mode--> Here is a link for you to check: http://jsfiddle.net/sna2D/

在阅读了这里所有的答案，并看到了所描述的复杂性之后，我开始了一个关于人力资源实验的小转移。并且，结论是你可以扔掉你写的大部分monkeypatched CSS，阅读这篇小入门，只使用这两行纯CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

这就是你为人事简历设计风格所需要的全部内容。

适用于跨浏览器、跨设备、跨操作系统、跨英语频道、跨年龄。 没有“我认为这可以工作……”，“你需要记住Safari/IE……”等等。 没有额外的CSS -没有高度，宽度，背景颜色，颜色等涉及。

只有防弹的彩色hr。就是这么简单。

奖励:给HR一些高度H，只要设置边界宽度为H/2。

我在2015年5月的IE, Firefox和Chrome上进行测试，这在当前版本中效果最好。它将HR居中，并使其70%宽:

人力资源。光{ 宽度:70%; 保证金:0汽车; 边框:0px无白色; Border-top:1px纯浅灰色; ｝ <hr class="light" />

我认为这很有用。这是一个简单的CSS选择器。

Hr {background-color:红色;身高:1 px;边界:0;｝ <人力资源>