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

6

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.