#Horizontal Rule

#Import

import { Hr } from '@dnb/eufemia/elements'

#Description

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.

#Relevant links

• Figma
• Source code
• Docs code

#Customize hr color

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

#Horizontal Rule thickness tests

Browsers render borders differently. They also handle sizing differently. For example, 1.5px will 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 of 2020, Firefox does the best job of showing the line thickness correctly.

#Demos

#Horizontal Rule default

#Horizontal Rule dashed

#Horizontal Rule in fullscreen