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

angular-material angular6 angular-forms
Anup picture Anup · Dec 23, 2018 · Viewed 12.9k times · Source

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.

Answer

Jo&#227;o Portella picture João Portella · Mar 17, 2019

Material v7.3.4

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

Related questions

Angular 6 error show to 'mat-form-field' is not a known element:

Hi I am using angular 6 and my code is as follows: import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from …

Read More
how to pass data from angular material dialog to parent component?

I'm using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user's data and then I have two buttons to submit and cancel. I tried to show my form's data …

Read More
Angular Material mat-select dynamic data binding in Angular

I am using Angular 6 and Angular Material. When i click on Edit button the Secondary, SSC and Male Value will be initialized on the select. But i can not able to do it. I only able to show Male value …

Read More