<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>
.a {
  width: 700px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.a__item {
  background: azure;
  width: 100%;
  height: 50px;
  --border-color: orange;
  box-shadow: inset 0px 1px 0 0 var(--border-color), inset 0 -1px 0 0 var(--border-color);
}

/*для первого и последнего рамка 2 пх*/
.a__item:first-child {
    box-shadow: inset 0px 2px 0 0 var(--border-color), inset 0 -1px 0 0 var(--border-color);
}
.a__item:last-child {
    box-shadow: inset 0px 1px 0 0 var(--border-color), inset 0 -2px 0 0 var(--border-color);
}
.a__item:hover {
 --border-color: black;
  box-shadow: inset 0px 1px 0 0 var(--border-color), inset 0 -1px 0 0 var(--border-color),0px 1px 0 0 var(--border-color),  0 -1px 0 0 var(--border-color);
  z-index:99;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.