How to create a rounded rectangle shape Css?

Question

I'm trying to design a profile image shape just like this

but my code given me the following design

I'm worried about the white space inside the border and the shape here is code

.doctor-profile-photo {
  width: 210px;
  height: 210px;
  border-radius: 60px/140px;
  border: 5px solid #000;
  box-shadow: 0px 2px 5px #ccc;
}
.doctor-profile-photo img {
  width: 100%;
  height: 100%;
  border-radius: 60px/140px;
}

<div class="doctor-profile-photo">
  <img src="http://weknowyourdreams.com/images/bird/bird-09.jpg" alt="">
</div>

Answer 1

This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want.

<style>
 #pic { 
    position: relative;     
    width: 130px; 
    height: 150px; 
    margin: 20px 0; 
    background: red; 
    border-radius: 50% / 10%; 
    color: white; 
    text-align: center; 
    text-indent: .1em;
 } 
 #pic:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5% / 50%; 
 } 
</style>
<div id="pic"></div>

Here's a useful link : https://css-tricks.com/examples/ShapesOfCSS/