Hiding/Showing border

Question

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.

Answer 1

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.