CODEWITHSUNDEEP
css
WoJ
WoJ

Reputation: 30045

Is it possible to hide a border, preserving its width?

I would like to conditionally apply a border to a <div> to highlight it (the framework used is Vue3 and Quasar, if this matters). The border would be 3px wide.

In case a <div> is not highlighted, I would like it to still have a 3px, but invisible. The reason for that is that I do not want the <div> to "jump" when the border is visible or not (the border takes some space, and the <div> will rearrange when it is missing).

I thought that border-style: hidden would be a solution, but the docs state that

(...) the computed value of the same side's border-width will be 0, even if the specified value is something else

Is there a simple way to hide the border, keeping its width for the DOM computations?

(I would like to use generic solutions before jumping into calculating the margin dynamically)

Upvotes: 0

Views: 207

Answers (1)

Etienne Bender
Etienne Bender

Reputation: 356

Basically you can set your border for your class with border: 3px solid transparent;, then change the color of the hovered div either by border: 3px solid #F54333; or by border-color: #F54333;

You can see an example below:

.container {
  background: #eee;
  padding: 5%;
}

.card {
  margin-bottom: 5%; 
  border: 3px solid transparent;
}

.card:hover {
  border-color: #F54333;
}
<div class="container">
  <div class="card">
    Div 1
  </div>
  <div class="card">
    Div 2
  </div>
  <div class="card">
    Div 3
  </div>
</div>

Upvotes: 2

Related Questions