CODEWITHSUNDEEP
angular-materialangular6angular-forms
Anup
Anup

Reputation: 181

How to remove the outline mat-form-filed border corner radius

I am using the angular material outline mat-form-field to design a form. I am getting the default mat-form-field outline text-box view with a border corner radius. Is there any way to remove the border corner radius of the outline mat-form-field and convert into a square text box view.

I tried to change the default styles of the angular material mat-form-field with the following, but it's not working.

//css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

//html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

I expect the outline mat-form-field with no border corner radius text box just like a square text box mat-form-field, but getting the default outline mat-form-field view.

Upvotes: 11

Views: 23545

Answers (8)

mscmnc
mscmnc

Reputation: 431

Angular v15 and Material v15. To remove the radius for outlined input:

 .mdc-text-field--outlined
   .mdc-notched-outline
   .mdc-notched-outline__leading {
   border-radius: 0;
 }

 .mdc-text-field--outlined
    .mdc-notched-outline
    .mdc-notched-outline__trailing {
    border-radius: 0;
 }

Upvotes: 0

Doug Kelley
Doug Kelley

Reputation: 31

I ended up using the following code and it worked for me:

::ng-deep  .no-line .mat-form-field-underline {
  display: none;
}

Upvotes: 0

Saad Abbasi
Saad Abbasi

Reputation: 853

For angular mat-card remove border-radius like this add this in your css

 mat-card{
    border-radius: 0px !important;
    }

you can also add class and then style that class

Upvotes: 0

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1029

remove boder and add box-shadow :

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
    border-radius: 50% !important;
    border: none;
    border-left: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
    border-radius: 1px !important;
    border: none;
    border-right: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
    border-radius: 1px !important;
    border-bottom: none;
}

::ng-deep.mat-form-field-appearance-outline .mat-form-field-outline {
    box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
    border-radius: 15px;
}

Upvotes: 2

jinavar1
jinavar1

Reputation: 363

My solution was very similar to other answers but I really don't like using !important, so I did the following (Material 9.1.0):

.mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-end {
  border-radius: 0;
}

Upvotes: 3

Mirza Wajid
Mirza Wajid

Reputation: 59

This is how i removed border radius. 

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

Upvotes: 5

Jo&#227;o Portella
Jo&#227;o Portella

Reputation: 387

Material v7.3.4

.mat-form-field-outline-start, .mat-form-field-outline-end {
    border-radius: 0 !important;
}

Upvotes: 9

codequiet
codequiet

Reputation: 1242

This will remove the border-radius

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
    border-radius: 0px !important;
}

but you'll need to put it in your top-level stylesheet (e.g. styles.css), the one that is added in angular.json, in order to override the Angular Material component styling.

Upvotes: 6

Related Questions