Is there a way to make the bottom border rounded at the ends? I want the solid line to have rounded edges, but it's not working with my current table code.
<p-table [value]="fg?.controls?.treesSummary?.controls" styleClass="sumTable">
<ng-template pTemplate="header">
<tr>
</tr>
<tr *ngFor="let item of fg?.controls?.treesSummary?.controls; let i = index" [formGroupName]="i" class="gray-border">
<th class="th_first_t">
<input type="number" [attr.disabled]="true" #ddNames [value]="this?.fg?.get('treesSummary')?.controls[0]?.get('copying')?.value +
this?.fg?.get('treesSummary')?.controls[0]?.get('unproot')?.value +
this?.fg?.get('treesSummary')?.controls[0]?.get('conservation')?.value"
digitOnlyTextBox pInputText />
</th>
<th class="th"><input type="number" #ddNames digitOnlyTextBox formControlName="conservation" pInputText /></th>
<th class="th"><input type="number" #ddNames digitOnlyTextBox formControlName="copying" pInputText /></th>
<th class="th_last_t"><input type="number" #ddNames digitOnlyTextBox formControlName="unproot" pInputText /></th>
</tr>
</ng-template>
</p-table>
css
.gray-border {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.th_last_t {
border-radius: 0px 0 0 15px !important;
background-color: red !important;
}
.th_first_t {
border-radius: 0 0px 15px 0 !important;
background-color: #edf3fb !important;
}
https://i.sstatic.net/UxO4M.png rounded with flex https://i.sstatic.net/SRV8o.png