CODEWITHSUNDEEP
cssangular8
Praveen Kumar
Praveen Kumar

Reputation: 35

Angular input/select box left outline not picking proper radius. when i have tried to custom radius

I have attach an output image.

CSS

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 20px !important;
}
.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 20px !important;
}

Output Image

enter image description here

Upvotes: 0

Views: 378

Answers (1)

andbjer
andbjer

Reputation: 554

.mat-form-field-outline-end and .mat-form-field-outline-start is contained within a flexbox. The issue is that .mat-form-field-outline-start has a width smaller than the border-radius. 

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 20px 20px 0;
  flex-grow: 1;
}
.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 20px 0 0 20px;
  flex-grow: 1;
}

Upvotes: 1

Related Questions