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>```