<h1 style='text-align:center'>Как было</h1>
<div class="a">
  <div class="a__item">CONTENT</div>
  <div class="a__item">CONTENT</div>
  <div class="a__item">CONTENT</div>
  <div class="a__item">CONTENT</div>
  <div class="a__item">CONTENT</div>
  <div class="a__item">CONTENT</div>
</div>


<h1 style='text-align:center'>Как стало</h1>
<div class="b">
  <div class="b__item">CONTENT</div>
  <div class="b__item">CONTENT</div>
  <div class="b__item">CONTENT</div>
  <div class="b__item">CONTENT</div>
  <div class="b__item">CONTENT</div>
  <div class="b__item">CONTENT</div>
</div>

.a, .b {
  width: 700px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.a__item {
  background: azure;
  width: 100%;
  height: 50px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
}

/*для первого и последнего рамка 2 пх*/
.a__item:first-child {
  border-top: 2px solid orange;
}
.a__item:last-child {
  border-bottom: 2px solid orange;
}

.a__item:hover {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.a__item:first-child:hover {
  border-top: 2px solid black;
}

.a__item:last-child:hover {
  border-bottom: 2px solid black;
}




.b__item {
  background: azure;
  width: 100%;
  height: 50px;
  border-top: 2px solid orange;
}
.b__item:last-child {
  border-bottom: 2px solid orange;
}
.b__item:hover {
  border-top: 2px solid black;
}
.b__item:hover + .b__item {
  border-top: 2px solid black;
}
.b__item:last-child:hover {
  border-bottom: 2px solid black;
}