Home  >  Q&A  >  body text

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

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:

P粉957661544P粉957661544218 days ago592

reply all(1)I'll reply

  • P粉020556231

    P粉0205562312024-04-07 13:11:06

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


    like like

    reply
    0
  • Cancelreply