ReactJS / Material-UI / Javascript: Can't get rounded borders on TableRow

I'm trying to get rounded borders on TableRow. I've added style "borderRadius: 5" but it doesn't do anything. When I surround TableRow by Box with borderRadius, it does work but then the table spacing is broken.

I've been messing around with this for a while but can't figure out.. What's the best solution for this?

<TableRow style={{ borderRadius: 5, backgroundColor: "green" }}>
        First table cell
        Second table cell
        Third table cell


  • Try add the css in the cell level like below,

    .MuiTableRow-root td:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    .MuiTableRow-root td:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;

    Working code -