The <hr> element causes a horizontal rule to be rendered by visual user agents. However, user agents (such as browsers) may render this element in different ways and with different vertical space.
So, how can we style this element consistently across browsers?
Method 1
The horizontal rule can be given a height, a background color and margins to the top and bottom of the element:
hr {
height: 1px;
margin: 2em 0;
color: red;
background: red;
border: 0;
}Method 2
The horizontal rule can be given no height, a border across the bottom, and margins to the top and bottom of the element:
hr {
height: 0;
margin: 2em 0;
border: 0;
border-bottom: 1px solid blue;
}