Borders using box shadow

It's possible to create borders using box-shadows. The adventage of this method is that borders can be smaller that the component itself:

box-shadow: 0 5px 0 -4px color;

I used to make hoverable list items, with padding and separators:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

And then:

li {
  padding: 8px 16px;
  box-shadow: 0 16px 0 -16px #efefef;
}
li:last-child {
  box-shadow: 0;
}
li:hover {
  background-color: #efefef;
}
```

Source: https://codepen.io/fxm90/pen/yNVeQm