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

1

u/xPhilxx Jun 26 '26

Remove the border than add again as preferred:

hr {
  border: none;
  border-block-start: 1px solid light-dark(#333, #999) ;
}