<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.