Why is my hr tag translucent when it is set to a solid color of white?

Question

I have a html (with bootstrap) and a css, in my html I have a <hr> tag which has a class, then in my css I have Its border style. It's translucent and you can see the white color, but it's not "solid". I wish it were completely solid and not pale like I guessed.

body { background-color: #1b3b3c !important; color: white !important; }

.hr-left-bold {
  border: 0.2rem solid #fff;
  border-radius: 100rem;
  width: 20rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h3>Kérdés Cím</h3>
<hr class="hr-left-bold">
<p>Nem kéne így hagyni...</p>
<hr class="hr-left-bold">
<img src="./src/upvote.png" alt="like" class="img-fluid vote-img px-1">
<img src="./src/downvote.png" alt="like" class="img-fluid vote-img px-1">

It looks like this:

Honestly, I tried styling it with border tops, colors, everything, but nothing worked.

This is how I want it to look:

Answer 1

In newer boot versions, there are special "vertical rules" classes/rules that have some transparency.

To avoid this, add opacity: 1.0; to your CSS rules.

body {
  background-color: #1b3b3c !important;
  color: white !important;
}

.hr-left-bold {
  border: 0.2rem solid #fff;
  border-radius: 100rem;
  width: 20rem;
  opacity: 1.0;
}

Kérdés Cím

Nem kéne így hagyni...