What is the default color of an <hr>?

Google was no luck, and also existing hr color questions, resulting in how to change the hr color

I want to create a border with the same color as the default <hr> color, but I don't know what color is it exactly.

Anyone knows?

ps - I know how to change the color of hr tag.. I want to find out what it is before I change it

---

The color of the horizontal ruler depends on the browser, but you can get the color of the hr element like following:

el = document.querySelector("hr");
color = window.getComputedStyle(el).getPropertyValue("border-top-color");
console.log(color);

Note however, that often the border-style is inset, so the color you get might differ from the "real" value you see on the screen. You either want to:

give your border the same border-style as the hr

set the border-style of the hr element to solid like I did in the demo to get the "real" color

get the border-style of the hr -element to and adapt your color accordingly (might be tricky and browserdependent to compute)

See a Demo which demonstrates getting the according color.

---

w3 does not define a default color for the hr element (http://www.w3.org/TR/CSS21/sample.html), html5 default stylesheet is not confirmed yet afaik but should not change this fact.

As a result, each browser is free to apply its own defaults.

---

The color is browser/implementation dependent, so knowing the color is not possible.

Instead you can define the color of the <hr> element as you like using CSS:

hr {
    color: red;
}

Now you know that the color is red!

Update: As it seems that depending on the browser one needs to use color or background-color (see comments). It seems sensible to use both in your CSS:

hr {
    color: red;
    background-color: red;
}

链接地址: http://www.djcxy.com/p/15744.html

上一篇: 如何在html中显示一条彩色线？

下一篇: 什么是<hr>的默认颜色？