What is the default color of an <hr>?

Question

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?

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

Answer 1

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.

Answer 2

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.