React Native rounded image with a border : <p>I want to create a rounded image with a border. If I add <code>borderColor: 'green', borderWidth:1</code>, border is visible only in top left part of the rounded image.</p>

<p><a href="https://i.stack.imgur.com/4wq5R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4wq5R.png" alt="enter image description here"></a></p>

<pre><code>&lt;TouchableHighlight
          style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}
        &gt;
    &lt;Image source={{ uri:"https://www.t-nation.com/system/publishing/articles/10005529/original/6-Reasons-You-Should-Never-Open-a-Gym.png" }} style={styles.profileImg} /&gt;
&lt;/TouchableHighlight&gt;

export default styles = StyleSheet.create({
  profileImgContainer: {
    marginLeft: 8,
    height: 80,
    width: 80,
    borderRadius: 40,
  },
  profileImg: {
    height: 80,
    width: 80,
    borderRadius: 40,
  },
});
</code></pre>
