How do I style a horizontal rule HR tag with CSS?

Here’s how you can style the Horizontal Rule tag with CSS. Just a note, the default of an HR tag is 100% wide, 2px high (1px for line the and 1px for a border to give the line a 3D effect).

  width: 100%;
  height: 1px;
  background: #DFDFDF;
  margin: 30px 0;
  display: block;
  border: none;

I prefer to add borders to divs to create horizontal lines but there are situations where an HR tag is useful.

Back to Blog

Say Hello

You can reach me by email, I'd love to hear from you.