How to create a form with text boxes with an image and rounded corner

Ionic Framework ionic-v3
1

Why I can’t easily control the borders if input elements to acheive a rounder cornered text boxes. I understand we don’t do rounded corner anymore but sometimes the client wants a design that’s 20 years old and I must do it. The framework I use should have the flexibility of choosing the design I wanted to acheive. But in ionic that’s not the case. I can’t achieve rounded corners in any way. Can anyone please tell me how to acheive a text box with icon in the left and rounded corners?

I am using ionic 3, the below is my markup

  <div text-center class="logo-container">
  <img class="login-logo" src="./assets/imgs/clean_connect.png" alt="Logo">
    <h4>Sign in to your account</h4>
  </div>
  <form [formGroup]="signInForm" (submit) = "login(signInForm.value)" novalidate>
    <ion-list>  
      
      <ion-item>
        <ion-label><ion-icon name="ios-person-outline" item-left></ion-icon></ion-label>
        <ion-input type="text" value="agira" placeholder="Username" formControlName="username"></ion-input>
      </ion-item>
      <ion-item no-lines  *ngIf="!signInForm.controls.username.valid && (signInForm.controls.username.dirty)">
      <div>
        Please enter valid Username
      </div>
      </ion-item>
      <ion-item>
        <ion-label><ion-icon name="ios-lock-outline" item-left></ion-icon></ion-label>
        <ion-input type="password" value="Agira1" placeholder="Password" formControlName="password"></ion-input>
      </ion-item>
      <ion-item no-lines *ngIf="!signInForm.controls.password.valid && (signInForm.controls.password.dirty)">
      <div>
        Please enter Password
      </div>
      </ion-item>
    </ion-list>
    <button class="sign-in" type="submit" ion-button full favourite [disabled]="!signInForm.valid">Sign In</button>
  </form>
</ion-content>```
2

i don’t know how to get this rounded input on IONIC 3

but I have the solution for ionic v4

Check out this link

[How To Make Rounded Input](https://stackoverflow.com/questions/30578889/how-to-make-rounded-input-field-in-ionic/58195405#58195405)

all you need to do for icon then , put ion-icon right after ion-item tag

like this :

<ion-item class="roudedInput">
  <ion-icon align-self-center name="trash" slot="start"> </ion-icon>
 <ion-label>Rounded Input</ion-label>
 <ion-input></ion-input>
</ion-item>

if you need your label to always be visible use , ion-text instead of ion-label

and make sure you use ion-grid to have best out put on smaller device’s