如何阻止水平边框相互重叠？

div {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid black;
}

div {
  width: 100%;
  border: 1px solid black;
}

div + div {
  border-left: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

div {
  position: relative;
  width: 100%;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid black;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  border: 1px solid black;
}

.grid-item:not(:last-child) {
  border-right: none;
}