How Do I Change the Color of an HTML Horizontal Rule () Using CSS?

Styling the Horizontal Rule

While the code snippet included below initially tries to change the color of an

<hr> tag using CSS, it proves unsuccessful:

<hr>

hr {
  color: #123455;
}

Solution

To alter the

<hr> element's line color, consider using the property border-color instead of color:

hr {
  border-color: #123455;
}

However, note that if the line size changes, the border width remains as specified in the style, while the line itself reverts to the default color. Therefore, it's advisable to also specify background-color.

The HTML 5 Boilerplate default stylesheet includes the following rule:

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

Additionally, an article by SitePoint highlights that

<hr> can inherit its border color from its parent element using the CSS property border-color: inherit.

The above is the detailed content of How Do I Change the Color of an HTML Horizontal Rule () Using CSS?. For more information, please follow other related articles on the PHP Chinese website!