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