CODEWITHSUNDEEP
htmlcssreactjs
ncesar
ncesar

Reputation: 1792

How to make a border not overlap another one, with multiple selections or single?

I have this sample code:

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
</div>

.container {
  display: flex;
  .square {
    display: inline-flex;
    width: 30px;
    justify-content: center;
    border: 1px solid black;
  }
}

And one problem is that if i add a border, it overlaps the next one.

border image

And i know that if i want to fix that issue, i can just use SASS and target all divs but not the first and last one, and this problem would be solved. But this solution creates a new problem: If i select only the div of number 2 and not multiple elements, the div 2 will now not have all of his borders.

How to fix the first issue, without causing a second one? I dont think this is duplicated, since i'm having a problem caused by a fix.

If helps, i'm using React atm.

Upvotes: 0

Views: 1187

Answers (1)

jcal
jcal

Reputation: 875

There are multiple solutions to this common problem.

Another would would be to shift every element but the first to the left by 1px (border-width)

Assuming your selection changes the color of the border. You can change the z-index while the element is selected. The same technique can also be used for your explained problem with the missing borders. To visualize this I added a hover styling.

.container {
  display: flex;
}

.square {
  display: inline-flex;
  width: 30px;
  justify-content: center;
  border: 1px solid black;
}

.square:not(:first-child) {
  margin-left: -1px;
}

.square:hover {
  border-color: red;
  z-index: 1;
}
<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
</div>

Upvotes: 3

Related Questions