Use the border property to create a visual divider.
li {
border-top: 1px solid black;
padding: .3em 0;
}
Then apply a border to the bottom of the ul element to create the bottom border
ul {
margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black;
list-style: none;
width: 36%;
}
To ensure consistency for the length of the dividers apply only a value to the margin left or padding left property of the unordered list.
Place dividers between html list items using CSS