Skip to content
Home

Horizontal Rule

The <hr /> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr /> tag is an empty tag and it does not require an end tag.

Customize hr color

/* Example of how to change the line color */
.dnb-hr:after {
  color: var(--color-ocean-green);
}
Something
Something

Horizontal Rule in fullscreen

Use the modifier dnb-hr--fullscreen to get a full screen rule. You can also set just fullscreen={true}.

Something
Something

Horizontal Rule thickness / hairline

Use the modifier dnb-hr--light to get a 0.5px rule. You can also set just light={true} or medium={true}.

Light 0.5px
Default 1px
Medium 1.5px

Horizontal Rule thickness tests

Browsers do render borders differently. They also handle sizing differently. E.g. will 1.5px be rounded up to 2px in Chromium based browsers (on size related CSS properties).

In order to address different solutions, here is a test case, finding the right balance of creating 0.5px / 1.5px lines, browser compatibility and correct look. As per year 2020, Firefox does the best job on showing the line thickness correct.