CODEWITHSUNDEEP
css
abharamAliPack
abharamAliPack

Reputation: 39

How to fix css border for card element?

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.

enter image description here

Upvotes: 2

Views: 2825

Answers (2)

TechySharnav
TechySharnav

Reputation: 5084

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 class="container">
  <div class="card card1">Card 1</div>
  <div class="card card2">Card 2</div>
  <div class="card card3">Card 3</div>
  <div class="card card4">Card 4</div>
</div>

Upvotes: 2

Guy Nachshon
Guy Nachshon

Reputation: 2635

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.

Upvotes: 0

Related Questions