how to create border for mat card like outline of mat form field in custom component

Question

I have this specific design requirement where i am using MatCardComponent and Inside each card there is table. now i want to add label floating in border gap like we have in MatFormField.

like above image but instead of input it will be MatCard and inside its a table.

Is there any way i can achieve this result? Please help me. Thank you

Answer 1

i found workaround and its working:

<div class="outline">
<mat-card>
 <mat-card-header>
     <mat-card-title class="title-overlap">test</mat-card-title>
 </mat-card-header>
</mat-card>
</div>

.outline{
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
}
.title-overlap{
  position: absolute;
  top: -17px;
  left: 20px;
  background-color: white;
  padding-left: 1rem;
  padding-right: 1rem;
}