--border-radius custom css style is not applied on ion-input (Ionic V7)

[mp035]

I am trying to get an ion-input to look something like this:

According to the Ionic V7 documentation I should be able to get the border radius using the --border-radius custom property on ion-input, however it is not applied. I can get the radius by using a plain border-radius property but that does not apply the border radius to the underlying native input so it looks terrible when a field is auto-filled by the browser.

Has anyone come across this? Could you tell me how to overcome it? Here is a minimal reproduction of what I have tried:

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-grid>
        <ion-row>
          <ion-col style="padding: 20px;">
            <ion-input label="test" class="custom"></ion-input> 
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
    import { IonPage, IonContent, IonInput, IonGrid, IonRow, IonCol } from '@ionic/vue';
</script>

<style scoped>
  ion-input.custom{
    border: 2px solid gray;
    --border-radius: 30px; /* does nothing */
    border-radius: 30px; /* applies the border radius only to the ion-input, not the underlying input */
  }

</style>

[techbinomial]

Work around

<ion-input
          aria-label="Custom input" 
          placeholder="Custom input" 
          label="Email"
          class="custom" 
          fill="outline" shape="round"
          helperText="Helper text"
          [counter]="true"
          [maxlength]="20"
        ></ion-input>

styles

.custom {
  text-align: left;
  max-width: 300px;
  --background:white;
  --color: black;
  
}
/*.input-fill-outline.has-focus
{
  border:solid 2px red;
  border-radius: 30px;
}*/
.input-fill-outline.input-shape-round {
  --border-color: blue;  
  --border-radius: 40px;
  
}

[mp035]

Hi @techbinomial , Thanks for the work-around. It is much better than what I was using. Unfortunately it still exhibits the funky look with chrome auto-fill: