i am using material UI in Nex.js project to give radius and border to table row which is not visible

Question

    <Table
        sx={{
           minWidth: 450,
            borderCollapse: 'separate',
            borderSpacing: '0 10px',
            '& .MuiTableRow-root': {
                border: '1px solid #AC1218',
                borderRadius: '10px',
                '&:last-child td': {
                    borderBottom: 'none',
                },`
        },
      }}
   >
    <TableHead  >
</TableHead >
<TableBody>
          
                  <TableRow
                    sx={{
                        position: "relative",
                             border: "1px solid #AC1218",
                            backgroundColor: selectedItem.includes(row?.characteristics_id) ? "#AC1218" : "transparent",
                            borderBottom:selectedItem.includes(row?.characteristics_id) ? "1px solid white" : "none",
                            borderRadius: "10px",
                        marginBottom: "10px",
                        zIndex: 2, 
                        
                    }}
                >
            <TableCell align="start" >
            </TableCell>
</TableRow>
</TableBody>

i try to use Pseudo classes but it conflict with safari browser,i use .MuiTableRow-root class to directly target the row but it also donot work please suggest a way to resolve the issues