Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box
property. I'd like to hide my border with "content-box". And here border: none
won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px
or border: none
but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With