How to fix css border for card element?-CodePudding

I have this elements. When I try to set border: 1px solid red for this elements it works wrong, for inside borders it show like border: 2px solid red, but I need 1px for all elements.

CodePudding user response：

It is because of border overlap. You can manually remove the specific borders of the cells.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin: 20px auto;
  width: 400px;
  height: 400px;
  background-color: #fff;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap:0px;
  grid-row-gap: 0px;
}

.container .card {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid red 1px;
}

.card1{ border-right: none !important; border-bottom: none !important; }
.card4{ border-left: none !important; border-top: none !important; }

<div >
  <div >Card 1</div>
  <div >Card 2</div>
  <div >Card 3</div>
  <div >Card 4</div>
</div>

CodePudding user response：

You should use inset in border-style. It makes your border turn inwards.

Inset - Displays a border that makes the element appear embedded. It is the opposite of the outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like a groove.

So you should add border-style: inset; to your CSS. then you can disable some of the inside borders to achieve your desired effects.