title: Why doesn't border-radius work on the image?
body: <p><a href="https://i.stack.imgur.com/KTzvj.png" rel="nofollow noreferrer">The image</a></p>
  <p>I have tried everything and the border radius doesn't work on this image. It just doesn't react to it. I have tried both % and px. Image reacts to any other CSS value that you can see or the properties that I am passing in the img tag in the component. Everything, except for border-radius. I am out of ideas.</p>
  <p>Here is the component:</p>
  <pre><code>import React from &quot;react&quot;;
  import {
    UserContainer,
    User,
    UserProfilePicture,
    UserProfileName,
    UserChevronIcon,
  } from &quot;./User.style&quot;;
  import Logo from &quot;../../../images/ProfileFace.jpg&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faChevronDown } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  
  function UserProfile() {
    return (
      &lt;UserContainer&gt;
        &lt;User&gt;
          &lt;UserProfilePicture&gt;
            &lt;img src={Logo} height=&quot;50&quot; width=&quot;50&quot; border-radius=&quot;50px&quot; /&gt;      -----&gt; both px and % don't work
          &lt;/UserProfilePicture&gt;
          &lt;UserProfileName&gt;Olivia Wilde&lt;/UserProfileName&gt;
          &lt;UserChevronIcon&gt;
            &lt;FontAwesomeIcon icon={faChevronDown} color=&quot;#7a7e7e&quot; /&gt;
          &lt;/UserChevronIcon&gt;
        &lt;/User&gt;
      &lt;/UserContainer&gt;
    );
  }
  
  export default UserProfile;
  </code></pre>
  <p>Here is the styled component:</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  export const UserContainer = styled.div`
    height: 90%;
    width: 30%;
    margin: 0px;
    padding: 0px;
    background-color: inherit;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  `;
  
  export const User = styled.div`
    height: 70%;
    width: 100%;
    background-color: inherit;
    display: flex;
    text-align: end;
    justify-content: space-around;
  `;
  
  export const UserProfilePicture = styled.image`
    height: 50%;
    width: 50%;
    border-radius: 100px;      -----&gt; both px and % don't work
    display: flex;
    justify-content: center;
    align-items: center;
  `;
  
  export const UserProfileName = styled.div`
    height: 40%;
    width: 40%;
    color: #7a7e7e;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  `;
  
  export const UserChevronIcon = styled.div`
    height: 50%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  `;
  </code></pre>