title: React Native rounded image with a border
body: <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>