how to set the border color to Card component in React material ui

What you're doing works, the problem is that you can't see a border without width nor style (solid, dashed, etc).

Try using style={{ border: "1px solid red" }}

You should use the borderColor prop on it like this:

<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

And the border size with the border prop like this:

<Box border={0}>…

See full API here: https://material-ui.com/system/borders/

You can use the border CSS property on the Card component to set the color.

<Card sx={{ border: '1px solid red' }}>
  <Typography variant='body1'>This has red borders</Typography>
</Card>

just it:

<Card sx={{ borderColor: 'red' }}>
  <Typography variant='body2'>This has red borders</Typography>
</Card>