I've exhausted all options but still can't get the border radius to work on this particular image. It just refuses to respond to any changes I make, whether it's in percentage or pixels. Every other CSS property seems to be working fine except for border-radius. I'm at a loss for what else to try.
Take a look at the component code below:
import React from "react";
import {
UserContainer,
User,
UserProfilePicture,
UserProfileName,
UserChevronIcon,
} from "./User.style";
import Logo from "../../../images/ProfileFace.jpg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
function UserProfile() {
return (
<UserContainer>
<User>
<UserProfilePicture>
<img src={Logo} height="50" width="50" border-radius="50px" /> -----> both px and % don't work
</UserProfilePicture>
<UserProfileName>Olivia Wilde</UserProfileName>
<UserChevronIcon>
<FontAwesomeIcon icon={faChevronDown} color="#7a7e7e" />
</UserChevronIcon>
</User>
</UserContainer>
);
}
export default UserProfile;
And here is the styled component code:
import styled from "styled-components";
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; -----> 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;
`;