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;
}

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.

user_392684 · Answer

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.

user_8620333 · Answer

You can also adjust the background-clip to avoid the border to overlap the background:

.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;
  background-clip:padding-box;
}

.card:hover
{
  border: 5px solid black;
}

user_10301665 · Answer

.card{
    border: 0px solid black;
}
.card:hover{
    border: 5px solid black;
}

I think that is your solve

user_9140740 · Answer

To hide border use border:none instead border: 5px solid rgba(0,0,0,0);

When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.

.card
{
  width: 250px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: none;
  background-color: red;
}

.card:hover
{
  border: 5px solid black;
}

Hiding/Showing border

4 Answers