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#
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.