adjustments for <hr>

[jensimmons]

From Reboot (Bootstrap's) and Normalize:

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

Thoughts? We should test this.

[JABClari]

Yhup

[pkra]

• 2. Show the overflow in Edge and IE.

Chromium also has overflow: hidden.

[scottkellum]

The beveled borders look not so great and dated. Adding a line like this might be nice?

border: .5px solid;

[jensimmons]

Test: https://codepen.io/jensimmons/pen/Jxmdez By itself (link may expire): https://s.codepen.io/jensimmons/debug/Jxmdez

hr {border: .5px solid;} definitely looks much better.

[hacknug]

Why not set the border's width at 1px instead? Wouldn't that ensure it looks consistent in different browsers and operating systems? If pure black makes it too prominent, opacity could be lowered which would also make it look good on colored backgrounds.

[scottkellum]

@hacknug .5px renders as 1px. It’s worth cross browser testing. I guess border-width: 1px 0 0; border-style: solid; would also work fine but it’s more verbose.

[hacknug]

I remember an issue I had when the iPhone X came out where half-pixel borders would render thicker on Safari Mobile than in other browsers. Didn't investigate it much since I didn't own such phone back then so maybe the issue was caused by something different than the ~@3x pixel density.

[mirisuzanne]

Closing, as this has already been implemented. We can re-open if there's an issue with it.

[mirisuzanne]

Based on @stacyk's PR comment and some testing, I think this needs a bit more conversation. From what I can tell:

• for border width, 1px 0 0 gives us the same result with better legacy support and no real down-side
• I can't find any reason to make an hr explicitly content-box? Why do we want that?
• Firefox seems to be the only UA stylesheet that adds an explicit color: gray, so the other browsers inherit a color/border-color. Should that be consistent?

I guess I'm proposing:

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit; 
  height: 0;
  overflow: visible;
}

[jensimmons]

I want us to file an issue for Firefox to fix this intro bug:

Firefox seems to be the only UA stylesheet that adds an explicit color: gray, so the other browsers inherit a color/border-color. Should that be consistent?

[ollicle]

As an alternative to 1px how does border-width; thin; behave in older browsers? Nods to: https://www.chenhuijing.com/blog/about-subpxiel-rendering-in-browsers/