Antd - How to make rounded borders for Table rows?

Question

I am using antd table for reactjs application.

I created Sandbox here for you to make changes. Can anyone help me make rows with rounded borders like below image?

Expected :

I have tried adding rowClassName={() => "rowClassName1"} with border related css but borders won't show up.

Answer 1

Try this approach,

.rowClassName1 td:first-child {
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
}

.rowClassName1 td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
 }

Working Demo :- https://codesandbox.io/s/antd-table-rounded-border-row-forked-9u4x9?file=/src/App.js

Answer 2

@UKS's answer solved the problem for me and able to make rows with rounded borders.

If someone wants to change header style as well with rows.

.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:first-child{
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:last-child{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}