#Hr-line (Divider)

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

#Customize hr color

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

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

#Demos

#Horizontal Rule default

#Horizontal Rule dashed

#Horizontal Rule in fullscreen