content: import React from 'react';
  import Grid from '@material-ui/core/Grid';
  import { unstable_Box as Box } from '@material-ui/core/Box';
  
  const inner = (
    <Box bgcolor="background.paper" m={1} border={1} style={{ width: '5rem', height: '5rem' }} />
  );
  
  function BorderColor() {
    return (
      <Grid container justify="center">
        <Box borderColor="primary.main" clone>
          {inner}
        </Box>
        <Box borderColor="secondary.main" clone>
          {inner}
        </Box>
        <Box borderColor="error.main" clone>
          {inner}
        </Box>
        <Box borderColor="grey.500" clone>
          {inner}
        </Box>
        <Box borderColor="text.primary" clone>
          {inner}
        </Box>
      </Grid>
    );
  }
  
  export default BorderColor;
  