How to create a rounded rectangular shape css?

Question

I am trying to create a profile picture form just like this.

but my code gave me the following design

I am worried about the empty space inside the border, and the form here is the 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 a pretty similar conclusion to what you want. Try adjusting the border-radius and height-width values ​​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

Path and SVg Template

You can create your shape in one way. I used a quadratic Bezier curve.
MDN path

I added the image to svg using the image tag and template tag.
It is then used inside the path using this fill="url(#img1)" .
The defs tag is used to hide elements that we do not use 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>