Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ?

Question

J'ai un html (avec bootstrap) et un css, dans mon html j'ai une balise <hr> qui a une classe et puis dans mon css j'ai un style de bordure pour cela. C'est translucide et on voit la couleur blanche, mais ce n'est pas "solide". J'aurais aimé qu'il soit complètement solide et pas pâle comme je l'avais deviné.

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">

Ça ressemble à ça :

Honnêtement, j'ai essayé de le styliser avec des hauts à bordures, des couleurs, tout, mais rien n'a fonctionné.

Voici à quoi je veux que ça ressemble :

Answer 1

Dans les versions de démarrage les plus récentes, il existe des classes/règles spéciales de « règles verticales » avec une certaine transparence.

Pour éviter cela, ajoutez opacity: 1.0; à vos règles CSS.

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...