How to create a rounded rectangle shape Css? - html

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/

Answer 2

SVg path and pattern
You can create your shape with a single path. I used a quadratic Bezier curve.
Path MDN
I added an image to the svg using a image tag and pattern tag.
This is then using inside the path with this fill="url(#img1)".
The defs tag is used to hide elements we are not using directly.
<svg viewBox="0 0 100 100" width="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="400">
<image xlink:href="http://lorempixel.com/400/400/" x="0" y="0" width="100px" height="100px" />
</pattern>
</defs>
<path d="M15,15 Q 50,0 85,18 100,50 85,85 50,100 18,85 0,50 15,15Z" fill="url(#img1)" />
</svg>