边框没有圆形限制 - css

Question

如何将底部边框固定为圆形限制？ 我所需要的只是将实线四舍五入，并且在我的表格编码时，该线未四舍五入

 <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;
}

圆角弯曲

Answer 1

如果我正确理解了这个问题，我认为您还需要将边框半径添加到 .gray-border ：

.gray-border {
  ...
  border-radius: 0 0 15px 15px;
}

我注意到您还需要将 th_first_t 和 th_last_t 的边界半径交换为如下所示：

.th_last_t {
    ...
    border-radius: 0 0px 15px 0 !important;
}
.th_first_t {
    ...
    border-radius: 0px 0 0 15px !important;
}

这是一个 jsfiddle： https://jsfiddle.net/ds0uph3v/