How can I make a border for an Avatar like on facebook with material ui in react?

Question

This is how I tried it to work:

    
    avatarHolder: {
        boxShadow: theme.shadows[10],
        transform: 'translateY(-50%)',
        borderRadius: "50%",
        border: '1',
    },
    large: {
        width: theme.spacing(25),
        height: theme.spacing(25),    
    },
    

}));

 <Grid  item xs={4} align="center">
        <Box border={4} className={classes.avatarHolder}>
             <Avatar alt="avatar" src={DefaultAvatar} className={classes.large} />
        </Box>
 </Grid>

But it doesn't work: Also when I resize the page, the border is changing this is what happened

I'm trying making it look like avatars on facebook This is what I want to achieve

I'm new in react developement, thanks in advance!

Answer 1

To achieve that I been using the style property of the Avatar

<Avatar
    src={avatarURL}
    style={{
             border: '0.1px solid lightgray'
          }}
/>

This is the result example