[Fixed] How do I add a border on a Angular Material textarea field?

Issue

I’m using Angular with Material Design components. How can I add a border around a textarea input field using CSS?

Example textarea from https://material.angular.io/components/input/examples:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

What the default textarea looks like

Solution

if you add appearance="outline" to your mat-form-field it will add a border around your field

source: https://material.angular.io/components/form-field/overview