I'm trying to round a image and the top of the circle isn't rounding. I believe it's-CodePudding

problem photo

I'm trying to make this image a circle I believe I might have too much padding. When I adjust the border-radius it doesn't round correctly. I have added the html and a link to see the problem.

button 
    { 
    background-color: #433966;
    border: 5px solid #5d596a;
    border-radius: 10px;
    box-shadow: 8px 8px 8px rgba(65, 62, 62, 0.2);
    margin: 0px auto;
    display: block;
    color: rgb(205, 187, 162);
    font-size: 20px;
    padding: 15px 20px;
    transition: all 300ms ease;
    text-align: justify;
    font-weight: bold;
    font-family: Optima;

    }

 img 
    {
     border-radius: 50%;
     perspective: 8px;
     padding-bottom:5%;
     padding-top: 20%;
     border-color: silver;
     width: 300px !important;
     height: 300px !important;
    }
  <div >
        <img src="images/rachel.jpg" alt="Avatar" 
        width= 100%>
        
        <button>Portfolio</button>
  </div>

CodePudding user response：

You should wrap your image in another element and add padding and other styles to it


div 
    {
     border-radius: 20%;
     perspective: 8px;
     padding-bottom:5%;
     padding-top: 20%;
     border-color: silver;
     width: 300px !important;
     height: 300px !important;
    }

div img{
   width: 100%;
   height: 100%;
}

CodePudding user response：

you can use a margin instead of padding to add space and it will work fine

 img 
{
 border-radius: 20%;
 perspective: 8px;
 margin-bottom:5%;
 margin-top: 20%;
 border-color: silver;
 width: 300px !important;
 height: 300px !important;
}

image for padding vs image for margin