title: How can I make a border for an Avatar like on facebook with material ui in react?
body: <p>This is how I tried it to work:</p>
  <pre><code>    
      avatarHolder: {
          boxShadow: theme.shadows[10],
          transform: 'translateY(-50%)',
          borderRadius: &quot;50%&quot;,
          border: '1',
      },
      large: {
          width: theme.spacing(25),
          height: theme.spacing(25),    
      },
      
  
  }));
  
  
  </code></pre>
  <pre><code> &lt;Grid  item xs={4} align=&quot;center&quot;&gt;
          &lt;Box border={4} className={classes.avatarHolder}&gt;
               &lt;Avatar alt=&quot;avatar&quot; src={DefaultAvatar} className={classes.large} /&gt;
          &lt;/Box&gt;
   &lt;/Grid&gt;
  </code></pre>
  <p>But it doesn't work:
  Also when I resize the page, the border is changing
  <a href="https://i.stack.imgur.com/t6reG.png" rel="nofollow noreferrer">this is what happened</a></p>
  <p>I'm trying making it look like avatars on facebook
  <a href="https://i.stack.imgur.com/IKF3w.png" rel="nofollow noreferrer">This is what I want to achieve</a></p>
  <p>I'm new in react developement, thanks in advance!</p>