Angular Material mdInput border around the control

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

The newer version of angular form field supports different appearances for the form fields like

1. legacy (material default)
2. standard
3. fill
4. outline

Outline is what you are looking for

look at the demo here

https://stackblitz.com/edit/angular-61fqsd?file=src/app/app.component.html

Recommended way to override default Material2 styles is to use ViewEncapsulation. deep, ::ng-deep and >>> are depreciated and maybe dropped in future (official documentation).

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).

---

To set a border for the input, include the following in your component.ts:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

... then just add the following in your component styles:

/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
   border: 1px solid black;
}

/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
   background: transparent;
}

/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
   background-color: transparent; 
}

Here is a working demo.

This worked for me

.mat-form-field-underline .mat-form-field-ripple {
  background: orange !important;
}