How to remove bottom border of <ion-radio>?

Ionic Framework
1

I am displaying some radio buttons like so:

snip2

But now I want to remove the bottom border from them.

Below is my HTML & CSS, can someone please tell me how to do this?

<ion-radio-group [(ngModel)]="userType">
      <ion-row class="rowStyle">
        <ion-item color="primary-contrast">
          <ion-label>Customer:</ion-label>
          <ion-radio value="customer"></ion-radio>
        </ion-item>
        <ion-item color="primary-contrast">
          <ion-label>Supplier:</ion-label>
          <ion-radio value="supplier"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

CSS:

.rowStyle {
    background-color: white;
    padding-left: 10px;
    border-radius: 30px;
    margin-bottom: 10px;
  
    ion-icon {
      margin-top: 13px;
      margin-right: 10px;
    }
  }
1 Like
2

Which version of Ionic are you using? Probably something in the ion-item that needs to be changed.

3

Hi, it’s ionic 5 I’m using

4

<IonItem lines="none">

2 Likes
5

hi use following code on your page.scss
.item-md.item-block .item-inner {

    padding-right: 8px;

    border-bottom: none;

}