How to remove bottom line from the ionic 2 components

Seems like there isn't a way to remove that by using Ionic Sass properties. That being said, we can remove it by just using some css style rules:

.item-md.item-block .item-inner,
.item-md.item-input.input-has-focus .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner,
.list-md .item-input.input-has-focus:last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
    border-bottom: none;
    box-shadow: none;
}
.list-md .item-input.input-has-focus:last-child .item-inner,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner,
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child .item-inner {
    box-shadow: none; 
}

just include your <ion-item></ion-item> elements within a <ion-list inset></ion-list>. Make sure you include inset property to your ion-list.


Just include no-lines in ion-item. Just like below

<ion-item no-lines></ion-item>


You can now just add lines="none".

Example:

<ion-item class="ion-card" lines="none">

From: https://ionicframework.com/docs/api/item