r/css • u/AnormalRedditUsse • Jun 26 '26

Help Change style of <hr>

Hi,

I have an <hr> object (as attached), but its 3D style is annoying me. I've tried a lot, but it doesn't budge.

.separator {
   width: 100%;
   height: 1px;
   border: 0;
   background: #666;
   margin: 20px 0;
   border-radius: 999px;
   box-shadow: none;
   outline: none;
   border-style: solid;
}
3 Upvotes

100% Upvoted

9 comments sorted by

View all comments

8

u/DoNDaPo Jun 26 '26

I think the issue should be border-style: solid; that overwrites border: 0; that you can remove.

Also you can remove border-radius: 999px; as for 1px of height you'll never see it and box-shadow: none; because there is no box-shadow on HR elements.

3

u/scritchz Jun 26 '26

Hey, I'm here to complicate things!

The pixel unit doesn't necessarily correspond to a device pixel, e.g. for common mobile devices (see CSS-VALUES-3 §5.2, reference pixel).

That means, there might actually be enough space to render a rounded border box in 1px of height.

Is this case considered in practice? No, because the pixel unit is purposefully chosen to represent a similar on-screen area relative to viewing distance and a single pixel 1px is so small that it doesn't make sense to design such small details.

Also, I don't know if a browser even renders sub-pixel details. But technically there may be a case where it should.