Ion-list full border at top and bottom with inset lines


I am aware that the ion-list has the options for lines to be inset or full or none. However I’d like to still have the inset lines, but to remove the border on the bottom from the last item, and add a border at the top to the first.

So far this is what I have that works for the full-width top and bottom border


.outer-content ion-list {
  border-bottom: solid 1px rgb(200, 199, 204, 1) !important;
.outer-content ion-list ion-item:first-of-type {
  border-top: solid 1px rgb(200, 199, 204, 1) !important;

However the bottom border CSS does not work, although I can style the element in the same way via chrome inspector.

This is what I am using to attempt to target the bottom border:

.outer-content ion-list ion-item .item-inner:last-of-type {
  border-bottom: none !important;

have you solve your problem by using this funky code or you wanna help in doing this…?

The two top lines of CSS work, but the CSS to remove the bottom border of the last <ion-item> does not.

If there’s a cleaner/better way to achieve this, I’m open to try anything.