What is the default color of an <hr>?

css, html, javascript

Solution

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.

Problem

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

Original source

Related problems