How do I get rid of double border on a grid?

Question

I have the following code:

body {
  position: absolute;
  left: 25%;
  top: 0;
}

.grid {
  width: 300px;
  height: 300px;
}

.row {
  width: 100%;
  height: 100px;
  display: flex;
}

.cell {
  border: 1px solid green;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.decoration {
  font-size: 50px;
  text-align: center;
/*   center vertically */
  line-height: 100px;
}

.declareWinner {
  display: flex;
}

.winner {
  margin-left: 10px;
}

<div class="grid">
  
  <div class="row">
    <div class="cell" data-index="1"></div>
    <div class="cell" data-index="2"></div>
    <div class="cell" data-index="3"></div>
  </div>
  
  <div class="row">
    <div class="cell" data-index="4"></div>
    <div class="cell" data-index="5"></div>
    <div class="cell" data-index="6"></div>
  </div>
  
  <div class="row">
    <div class="cell" data-index="7"></div>
    <div class="cell" data-index="8"></div>
    <div class="cell" data-index="9"></div>
  </div>
</div>

<div class="declareWinner">
  <h1>Winner is</h1>
  <h1 class="winner"></h1>
</div>

I've used box-sizing: border-box; but notice the double borders are still here:

https://i.stack.imgur.com/mS8s0.jpg

However, when I added 2 negative margins to my .cell, I only see the side borders, not the bottom borders, stop the overlapping. Why is this happening and how do I make all overlapping borders go away?

https://i.stack.imgur.com/UvDs9.jpg