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

Profile

footer text

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

I have a html (with bootstrap) and a CSS, and in my html I have an <hr> tag which has a class, then in my CSS I have it styled with border. It is translucent, you can see the white, but it isn't "solid". I want it to be completely solid, and not like pale I guess.

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

Here's what it looks like:

I tried to style it with border-top, color, everything to be honest and nothing works.

Here's how I want it to look:

Comments:

2023-01-19 00:10:03

Did you also try background: #fff?

2023-01-19 00:10:03

This might be due to using the <hr> tag. Have you tried using a <div> instead? You can set it's height: 0.2rem and the background-color: #ffffff.

2023-01-19 00:10:03

Try using codepen.io or codesandbox.io instead of the screenshots, it'll be easier to share and try some different options

2023-01-19 00:10:03

E.g. codepen.io/Jeff518Code/pen/mdjqOGW - adding background: #fff seems to work

2023-01-19 00:10:03

Was there a typo with the border-radius? Was it supposed to be 100rem?

2023-01-19 00:10:03

background: #fff sadly doesn't work. I haven't tried a div, i will try it. It is supposed be 100rem, this way it's completely round, because it's a hight number.

2023-01-19 00:10:03

Using the browser inspector can you see if there are any other rules applied to the hr other than your class? The border-radius doesn't need to be greater than the thickness of the line, 0.2rem will yield the same results.

2023-01-19 00:10:03

@JDev518 On Stack Overflow we have Stack Snippets, which should be preferred over CodePen and the like, so that the code remains on this site.

Answers(1) :

In newer bootstrap versions there are special "vertical rule" classes / rules which have some transparency.

To avoid that, add opacity: 1.0; to your CSS rule.

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

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

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

Questions & Answers