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

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:

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

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

<style scoped>
    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 */


Work around

          aria-label="Custom input" 
          placeholder="Custom input" 
          fill="outline" shape="round"
          helperText="Helper text"


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

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: